本文目录一览：
VUE本地跨域解决方案
我们前端使用接口时，时常遇到跨域问题，一般都是后台设置开放访问权限解决跨域，如果后台不配合或者为了安全问题而不能开放权限，那么我们前端只能自己解决跨域问题了！！！直接再问vue中使用nodeJS进行代理就可以解决跨域问题。
1、首先找到项目所在的config文件下的index.js，打开此文件；
2、找到module.exports里面的dev模块，dev:{ proxyTable:{ } };
将target设置成你想跨域的域名，
changeOrigin设置成true（即：允许跨域）；
pathRewrite设置新的路径，这个其实没有必要重新设置；
host设置成：localhost；
port设置成自己本地项目的端口号如：8001；
3、找到main.js并打开，添加：Vue.prototype.HOST = ‘/api’ //设置全局的请求域名；这样就可以全局使用了！
4、在请求接口的页面这样请求接口就可以啦：
var urls = this.HOST +’/login/get/dingdingUser’;//this.HOST就是你跨域的域名，这样就可以直接跨域了；这时urls就是你的接口名称啦！！！
vue跨域解决方法
vue跨域解决方法
使用axios请求
第一步骤
在vue.config.js 文件中 module.exports = { } 中添加
devServer: {
proxy: {
‘/profile’: { //指定 路径 要 跨域请求地址
// 在本地会创建一个虚拟服务端，然后发送请求的数据，并同时接收请求的数据，这样服务端和服务端进行数据的交互就不会有跨域问题
// 将/api开头的url转发到target上。
target: ‘ ‘,// 跨域请求地址
changeOrigin: true, //虚拟的站点需要更管origin
ws: true, // 代理websockets
secure: true, // 如果是https接口，需要配置这个参数
pathRewrite: {
// 顾名思义，将/api重写为 / 此时url变为 而不是
‘^/profile’: ”
}
}
}
第二步骤
在封装axios请求中设置
const service = axios.create({
baseURL: ‘/profile’,//定义要跨域的接口路径
withCredentials: true,//是否支持跨域
timeout: 500000, // request timeout
headers: {
‘Cache-Control’: ‘no-cache’,
‘Content-Type’: ‘application/x-www-form-urlencoded’
}
});
Vue项目中跨域问题的解决
在Web端Vue项目开发过程中，跨域问题是不可避免的；在我参与的Vue项目中，使用服务器代理的解决方案；针对不同的环境（开发环境/生产环境），采用了不同的服务器代理方案；
服务器代理的原理大概是这样：
代理服务器和访问源（请求端）是同源的，但和被访问服务器（资源端）是不同源的，但服务器之间的访问不受浏览器同源策略的影响(即不必担心是否有跨域问题)，那么我们即可请求到同源服务器上的从被访问服务器上的获取到的请求资源了 ；
这样配置完成后，我们发起的每次http请求的Request Url的前面一部分都会和我们本地的源一样；
举例：
我们项目跑在开发环境下的 上，那么上述请求的Request Url的就是 ;这应该就是我们的代理服务器中该资源的地址，与客户端同源；而数据的实际来源则是 ，这样即实现代理跨域；
目前猜测这个代理服务器可能是Node；
nginx 版本： 1.16.1
修改 nginx.conf 文件下的 serve 下配置：
举例：
生产环境下的,我们项目跑Nginx服务器监听的 上，那么上述请求的Request Url的就是 ;
这应该就是我们的代理服务器中该资源的地址，与客户端同源；
而数据的实际来源则是 ，这样即实现代理跨域；
thinkphp6 + nginx + antd Admin-Vue解决跨域
我服务端是PHP，请求地址为
location / {
if (!-e $request_filename){
rewrite ^(.*)$ /index.php?s=$1 last; break;
}
if ($request_method = ‘OPTIONS’) {
add_header Access-Control-Allow-Origin ‘ ‘ ;
add_header Access-Control-Allow-Credentials true;
add_header Access-Control-Allow-Headers ‘token,Authorization’;
add_header Content-Length 0;
return 204;
}
}
原创文章，作者：GCCU，如若转载，请注明出处：https://www.506064.com/n/135439.html
微信扫一扫 
支付宝扫一扫 