vue项目之跨域解决方案
跨域常见解决方案jsonp (项目基本不用)原理:动态生成script标签,通过src属性加载缺点:不支持POST请求,支持get请求应用场景:有些第三方数据接口可能会使用jsonp解决跨域问题,工作中不怎么用。中间服务器代理A前端部署地址:127.0.0.1:8000B中间服务器:127.0.0.1:8000C目标服务器地址:127.0.0.1:8888因为浏览器的同源策略,A 和 c 存在跨域
·
跨域常见解决方案
jsonp
(项目基本不用)
原理:动态生成script标签,通过src属性加载
缺点:不支持POST请求,支持get请求
应用场景:有些第三方数据接口可能会使用jsonp解决跨域问题,工作中不怎么用。
- 中间服务器代理
A前端部署地址:127.0.0.1:8000
B中间服务器:127.0.0.1:8000
C目标服务器地址:127.0.0.1:8888
因为浏览器的同源策略,A 和 c 存在跨域问题,A 无法访问 服务器c
解决:因为跨域问题仅存在于浏览器(**服务器请求服务器的数据,没有跨域问题**),所以后台可以搭建中间服务器
让服务器B请求服务器c,然后将数据返回给前端A.
CORS
跨域资源共享,服务器端进行配置,( 后端开发人员设置 )加一个响应头(工作中常用)
res.header("Access-Control-Allow-Origin","*")
vue.config.js
vue反向代理
( 前端开发人员设置 )
module.exports = {
lintOnSave: false,
devServer: {
// 设置代理
proxy: {
"/api": {
target: "http://127.0.0.1:8888/api/private/v1", // 域名
ws: true, // 是否启用websockets
changOrigin: true, // 开启代理:在本地会创建一个虚假服务器,然后发送请求的数据,并同时接收请求的数据,这样服务端和服务端进行数据的交互就不会有跨域问题
pathRewrite: { // 路径重写:将 /api 替换为 /
"^/api": "/"
}
}
}
}
}
更多推荐
已为社区贡献9条内容
所有评论(0)