当我们前端要调用跨域接口时,我们需要用代理解决跨域问题,比如Vue的代理配置proxy,但是当Vue项目打包成静态文件时,他的代理也就失灵了,因为代理的前提是本地必须有service,本章讲一下生产环境的Vue项目如何做代理。
本章我们从两方面讲解Vue解决跨域的方案,一种是本地开发环境,另一种是生产环境(nginx解决vue跨域问题)
1.Vue本地(开发环境)解决跨域流程如下
(1)打开vue.config.js,在module.exports中添写如下代码:
devServer: {
port: port,
open: true,
overlay: {
warnings: false,
errors: true
},
proxy: {
'/api': {
target: process.env.VUE_APP_BASE_API,
changeOrigin: true,
pathRewrite: {
'^/api': 'api'
}
}
}
},
2)请求接口时加上‘/api’前缀
getData () {
axios.get('/api/getData.json', function (res) {
console.log(res)
})
2.生产环境解决跨域问题流程如下
(1)打包
我们通过terminal窗口,找到我们项目根目录 运行 npm run build
命令
(2)服务器安装nginx服务器
(3)配置nginx
找到nginx的配置文件 nginx.conf ,它的路径是 /etc/nginx/nginx.conf
nginx.conf的配置如下
server {
listen 8000;
server_name localhost;
#charset koi8-r;
#access_log logs/host.access.log main;
location /api {
proxy_pass https://www.baidu.com; #代理的域名
add_header 'Access-Control-Allow-Origin' '*';
add_header 'Access-Control-Allow-Credentials' 'true';
}
location / {
root /var/www/vue/;
index index.html index.htm;
}
}
解释如下:
-
https://www.baidu.com 是我们要代理域名
-
add_header 是增加返回头 解决跨域问题
注意:vue项目在请求域名的前面就要加上“/api”字符串,请求示例如下
test.post('/api/product/getData',params)
实战
nginx部署vue-admin-template
打包部署vue-admin-template项目
npm run build:stage
配置nginx配置文件
进入nginx文件夹下的conf文件,打开nginx.conf文件,修改端口以及配置子目录
server {
listen 8000;
server_name localhost;
#charset koi8-r;
#access_log logs/host.access.log main;
location /doctor {
root /var/www/vue/;
index index.html index.htm;
}
}
3、部署
在nginx目录里面的html文件夹中新建doctor文件夹
将vue-admin-template项目中的dist文件夹下的所有东西复制粘贴到nginx目录下的html下的doctor文件夹中。
重启nginx,在浏览器输入localhost:8090/doctor,进入网站页面
错误处理
虽然项目部署启动成功,但是当点击登录时报请求失败,使用火狐浏览器打开控制台的network,可以看到该请求路径的前面加了一个前缀/stage-api,使原后端接口请求由/doctor/login变为/stage-api/doctor/login。
使用nginx代理可以解决此问题:打开nginx.conf文件配置以下内容
location /stage-api {
proxy_pass https://www.baidu.com; #代理的域名
add_header 'Access-Control-Allow-Origin' '*';
add_header 'Access-Control-Allow-Credentials' 'true';
}