nginx反向代理配置和webpack.devServer

自从出了Cookie的sameSite属性，本地开发跨域联调就很费劲了，为了解决这个问题，我们可以再本地跑一个nginx服务，然后做反向代理，这样就没有跨域了！

当然，webpack有自带的跨域机制webpack.devServer，有兴趣的可以去查阅下相关资料

一、非框架开发时，配置本地nginx反向代理：

先去下载nginx包，然后解压，找到conf文件夹，里边有nginx.conf文件，打开，并修改server配置如下：

server {

listen 8088;// 前端访问端口

server_name 127.0.0.1;//这块可以自己配置，可以是域名（修改本地host文件）

#charset koi8-r;

#access_log logs/host.access.log main;

location / {

root html;

index exam-list.html exam-list.htm;

}

# 反向代理： /test/是接口公用路径

location /test/ {

proxy_set_header X-Real-IP $remote_addr;

proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;

proxy_set_header Host $http_host;

proxy_set_header X-Nginx-Proxy true;

proxy_set_header Connection "";

proxy_pass http://*.*.*.*:9999; #****这里填上服务器地址和端口

proxy_redirect default ;

}

#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;

}

}

ok，反向代理配置完成！

二、webpack 配置反向代理：

我用的vue开发项目，所以这里就写vue.config.js配置方法：

const { URL } = require('url');

const TARGET = 'http://192.168.0.0:8888/';//服务器ip地址

module.exports = {

//如果是cookie模式，注释掉ajax.js中的 debug代码 使用以下代码可以根据debug 实现动态代理

devServer: {

proxy: {

'/mall': {

target: TARGET,

changeOrigin: false,

ws: false,

router: function (req) {

let urlObj = new URL(req.headers.referer);

var debug = urlObj.search

.substr(1)

.match(new RegExp('(^|&)debug=([^&]*)(&|$)', 'i'));

debug = debug ? unescape(debug[2]) : TARGET;

return debug;

},

},

},

},

};

在此做笔记，方便日后查阅！

 对于不屈不挠的人来说，没有失败这回事。