Si no se establece cross-domain, la interfaz que necesita ser cross-domain es
https://sug.so.360.cn/suggest?word=a
palabra es el parámetro
Cómo configurar un dominio cruzado
1. El primer paso del dominio cruzado de vue es crear un archivo vue.config.js en el directorio raíz de vue. Siempre que se cambie el contenido de este archivo vue.config.js, el proyecto debe reiniciarse. escribir el código
// 这个文件是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就会把地址变成需要跨域的地址
// 该配置文件修改了 要重新启动Paquete axios dentro
// 封装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 serveral solicitar 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
}dominio cruzado jsonp
1. Ajax está limitado por la política del mismo origen y no permite el acceso entre dominios a los datos, pero podemos crear dinámicamente etiquetas de script y usar el atributo src del script para evitar estar limitado por la política del mismo origen.
1. Cree dinámicamente <script></script>(document.createElement('script'))
2. Configure el atributo src (el parámetro callback=fn debe incluirse en src) para la solicitud entre dominios
3. Agregue <script></script> a la página para su ejecución (body.appendChild('script'))
4. La página debe definir la devolución de llamada por adelantado.
5. El backend devolverá la función de devolución de llamada para ejecutar y ajustar la devolución de llamada del parámetro (datos)
Observación:
El servidor ya no devuelve datos en formato JSON, sino que devuelve la función de devolución de llamada para envolver los datos (fn({name:'tom',age:18}), que se llama en src, realizando así dominios cruzados.
<!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>