这里就不解释什么是跨域了。
跨域是前端最头疼的事情,它阻止了我们向后端请求数据,使之我们无法拿到数据去渲染。
当然,后端可以解决跨域,而且相当简单。但是如果再后端没办法的情况下,前端如果处理这种问题呢?
一:开发环境下(就是vue项目本地开发,没打包部署前)
1、vue cli2.x (npm run dev运行的项目):
我们可以在config文件夹中找到webpack的配置文件,其中的 index.js 文件中可以找到对应的跨域的配置,详情如下
module.exports = {
dev: {
// Paths
assetsSubDirectory: 'static',
assetsPublicPath: '/',
proxyTable: {
'/web1': {
target: 'http://192.1.2.33:5000/api/StudentSourceManage',// 这里是你实际真正请求的地址
changeOrigin: true,
pathRewrite: {
'^/web1': ''// 同上
}
},
},
},
}
这里用web1(名字可自定义)代替实际的请求地址(写接口的公共部分即可),然后在调用接口的地方用web1代替此地址
2、vue cli3.x(npm run serve运行的项目):
vue cli3中对于webpack的配置文件都是不可见的,但是我们可以自写配置去覆盖它
在项目的根路径下新建个vue.config.js文件,然后在文件中写上跨域的配置即可
module.exports = {
devServer: {
proxy: {
'/web': {
target: 'http://192.1.2.3:9000', // 对应自己的接口
changeOrigin: true,
ws: false,
pathRewrite: {
'^/web': '',
},
},
},
},
};
二、nginx部署vue项目实现解决跨域:
虽然上述配置解决了我们开发环境的跨域问题,但是vue基于打包会删除对应配置,那么打包后上述的配置就不会再起作用,那么我们如何解决呢?可以部署nginx解决此问题
看下nginx的配置文件:
#user nobody;
worker_processes 1;
events {
worker_connections 1024;
}
http {
include mime.types;
default_type application/octet-stream;
sendfile on;
keepalive_timeout 65;
server {
listen 8080;
server_name 10.8.9.94;
location ^~ /api {
proxy_pass http://192.1.2.3:9000;
add_header Access-Control-Allow-Methods *;
add_header Access-Control-Max-Age 3600;
add_header Access-Control-Allow-Credentials true;
add_header Access-Control-Allow-Origin $http_origin;
add_header Access-Control-Allow-Headers $http_access_control_request_headers;
if ($request_method = OPTIONS ) {
return 200;
}
}
location / {
root xiangmu/dist;
index index.html index.htm;
add_header 'Access-Control-Allow-Origin' '*';
try_files $uri $uri/ /index.html;
}
#error_page 404 /404.html;
# redirect server error pages to the static page /50x.html
#
error_page 500 502 503 504 /50x.html;
location = /50x.html {
root html;
}
}
}
上述配置文件中,http对象中包括一个server,是用来搭建服务器的,linsten和server_name是你项目要部署的地址和端口号,location后面的/api是为了快速匹配下面的对应地址,proxy_pass是实际要请求的服务器地址,第二个location下面的root指向项目地址,这里是xiangmu文件夹下的dist文件夹,因为我们知道vue项目打包后会生成dist文件夹,文件夹中会有一个index.html文件
配置好文件后,我们把dist文件放到对应位置,然后启动nginx应用程序即可。(需要nginx的配置文件,请联系博主)
然后我们再浏览器中访问我们的部署地址即可。(文中的部署地址是10.8.9.94:8080)
好了,以上就解决了我们前端跨域的问题,开发环境和正式部署环境都能解决跨域。
如有问题,请指出,接收批评。
个人微信公众号: