Si l'interdomaine n'est pas défini, l'interface qui doit être interdomaine est
https://sug.so.360.cn/suggest?word=a
le mot est le paramètre
Comment configurer plusieurs domaines
1. La première étape du cross-domain de vue consiste à créer un fichier vue.config.js dans le répertoire racine de vue. Tant que le contenu de ce fichier vue.config.js est modifié, le projet doit être redémarré. écrire le code
// 这个文件是vue的配置文件
// 一些额外的配置都放在这里
// 比如 跨域 自动打开浏览器 输出目录
module.exports = {
publicPath: "./",
devServer: {
open: true, // 自动打开浏览器
// proxy: "https://sug.so.360.cn", 这个接口必须跨域
// 可以直接设置跨域的地址
proxy: {
"/api": {
target: "https://sug.so.360.cn",
changeOrigin: true, //允许跨域
pathRewrite: {
"^/api": "",
},
},
},
// 不是所有的接口都要跨域 也可以给需要跨域的接口起一个识别的名字
// 只有前面带/api的接口才会跨域 其他的接口正常访问
},
};
// proxy跨域其实也是一种代理跨域 可以理解为欺骗浏览器 让浏览器以为没有跨域 访问的还是8080 ，但是服务器看到/api就会把地址变成需要跨域的地址
// 该配置文件修改了 要重新启动Paquet axios à l'intérieur
// 封装axios请求的模块
import axios from 'axios'
// 用axios重新生成了请求的实例
const server = axios.create({
baseURL: '', // 项目发送axios请求的公共地址 值为空
timeout: 5000 // 请求超时时间 这里是请求超过五秒后还没有获得请求结果 提示请求超时
})
server.interceptors.request.use(config => {
// config包含了请求相关的所有信息
// 可以同过config对象给请求配置或者修改信息
config.headers.token = '11111'
return config // 将配置完成的token返回 如果不返回 请求不会继续进行
}, err => {
// 请求发生错误时的回调函数
// 这里的意思是请求发送错误时将错误抛出
// throw new Error(err)
// console.error(err) //将错误信息打印在控制台中
Promise.reject(err) // 使用promise将错误信息返回出去
})
// axios 接受到服务器响应信息后的配置
// response 是响应的意思 这里的意思是使用响应拦截
server.interceptors.response.use(res => {
// res包含了服务器返回的所有响应信息 其实就是服务器返回给你的东西
return res.data
}, err => {
// 当服务器响应产生错误时的回调函数
console.error(err) // 这里将服务器发生错误的错误信息打印在控制台中
})
export default serverlors de la demande d'api
import request from '../network/reques'
const getBanners = async () => {
// /api 加上说明这个接口要跨域
let
data = await request({
url: '/api/suggest?word=a'
})
// console.log(data);
return data
}
export {
getBanners
}domaine croisé jsonp
1. Ajax est limité par la politique de même origine et n'autorise pas l'accès interdomaine aux données, mais nous pouvons créer dynamiquement des balises de script et utiliser l'attribut src du script pour éviter d'être contraint par la politique de même origine.
1. Créer dynamiquement <script></script>(document.createElement('script'))
2. Définissez l'attribut src (le paramètre callback=fn doit être inclus dans src) pour les requêtes inter-domaines
3. Ajoutez <script></script> à la page pour l'exécution (body.appendChild('script'))
4. La page doit définir le rappel à l'avance.
5. Le backend renverra la fonction de rappel pour exécuter et envelopper le paramètre callback(data)
Remarque:
Le serveur ne renvoie plus les données au format JSON, mais renvoie la fonction de rappel pour envelopper les données (fn({name:'tom',age:18}), qui est appelée dans src, réalisant ainsi le cross-domain.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
</body>
<script>
let dom = document.createElement("script");
// src属性帮助我们访问 接口 返回的是一段js代码 返回的代码格式是
// callback =fn 传入一个回调函数 用来接收 请求来的数据
dom.src = "https://sug.so.360.cn/suggest?callback=fn&word=a";
let body = document.getElementsByTagName("body")[0];
body.appendChild(dom); // 往 body 里追加 dom
// fn({res:xxx,status:111})
// 意思是执行fn函数 实参是请求到的数据
// 我们需要定义一个fn去接收这个实参
function fn(val) {
console.log(val);
}
</script>
</html>