Nginx部署反向代理配置跨域
开发环境中的跨域
在vue开发中，一般使用axios进行网络请求，是vue脚手架进行的代理，在项目根目录vue.config.js的文件中配置
module.exports = {
devServer: {
proxy: {
'/work': {
target: 'http://119.3.40.236:23333',
changeOrigin: true
}
}
}
}
这样的配置后使用这种方法就可以请求接口，以/work开头的请求都会经过代理来访问，解决跨域的安全性问题
var config = {
method: 'get',
url: '/work/covererror/list?limit=100&page=1',
headers: {}
};
axios(config)
.then((response) => {
console.log(response.data)
}
)
.catch(function (error) {
console.log(error);
});
生产环境中的跨域
项目最后会打包部署在nginx中，在nginx中配置代理有一点坑，就是nginx默认不进行静态的代理，如果开启代理后可能主站的静态css和静态js会无法获取到，静态的配置文件如下
location ~* \.(gif|png|jpg|css|js|woff|woff2)$
{
proxy_pass http://119.3.40.236;
proxy_set_header Host 119.3.40.236:23333/work;
proxy_set_header X-Real-IP $remote_addr;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
proxy_set_header REMOTE-HOST $remote_addr;
expires 12h;
}
完整的配置是这样的，配置代理请求 /work 路径 ，该请求会被代理到 proxy_pass参数下的URL
location /work
{
proxy_pass http://119.3.40.236:23333;
proxy_set_header Host $host;
proxy_set_header X-Real-IP $remote_addr;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
proxy_set_header REMOTE-HOST $remote_addr;
add_header X-Cache $upstream_cache_status;
#Set Nginx Cache
proxy_ignore_headers Set-Cookie Cache-Control expires;
add_header Cache-Control no-cache;
}