1. jsonp
原理:
动态生成script标签,通过src属性加载
缺点:不支持POST,只支持GET
应用场景:有些第三方数据接口可能会使用jsonp解决跨域问题
如:请求全国有多少城市,请求中国天气网天气、信息
2. 中间服务器代理
前端部署地址:127.0.0.1:8000
中间服务器:127.0.0.1:8000
目标服务器地址:127.0.0.1:8888
3. CORS跨域资源共享
服务器端进行配置,加一个响应头
res.header('Access-Control-Allow-Origin", "*")
常用的解决方案
4.反向代理
原理:
让proxy通过vue帮你产生一个代理服务器,
然后通过这个代理服务器去请求数据,最后把请求的数据返回给你
/api,表示,哪一种接口需要使用跨域?
如果我请求的路径是以/api开头,则使用代理服务器
毕竟不是所有的接口都需要使用跨域
target:要跨域跳转到的位置
pathRewrite:{ '^/api':'' }
根据你访问的路径判断是否要使用跨域,如果是以/api开头的,
则接下来拼接的时候,会把/api给省略掉
我们baseurl配置:
baseURL: '/api',
然后请求登陆 /login,相当于路径是/api/login,
通过pathRewrite拼接重新后:
从:http://localhost:3000/api/login
把/api重写为空,即为:
http://localhost:3000/login
在src文件夹中创建vue.config.js文件
module.exports = {
devServer:{
//设置代理
proxy:{
'/api':{
target:'http://localhost:3000',//要跳转的位置
pathRewrite:{
'^/api':''
}
}
}
}
}