如果不设置跨域 需要跨域的接口是
https://sug.so.360.cn/suggest?word=a
word 是参数
怎么设置跨域
1、vue的跨域第一步在 vue 的根目录创建一个 vue.config.js 文件 ，只要更改了这个 vue.config.js 文件里的内容必须重新启动一下项目。写入一下代码
// 这个文件是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就会把地址变成需要跨域的地址
// 该配置文件修改了 要重新启动封装axios里面
// 封装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 server在请求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
}jsonp 跨域
1、 ajax 受到同源策略的约束，不允许跨域获取数据，但是我们可以动态的为创建 script 标签，利用 script 的 src 属性 来不受到 同源策略的约束。
1.动态创建<script></script>(document.createElement('script'))
2.设置src 属性，(src中要包含参数callback=fn)进行跨域请求
3.将 <script></script>添加到页面中执行 （body.appendChild('script')）
4.页面要提前定义好callback。
5.后端会返回回调函数执行并包裹参数callback(data)
备注：
服务端不再返回JSON格式的数据，而是返回回调函数包裹数据（fn({name:'tom',age:18}），在src中进行了调用，这样实现了跨域。
<!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>