nginx设置代理解决跨域问题

vue工程 npm run build 后把dist包放到 nginx代理服务器的html目录，在conf/nginx.conf配置文件中增加配置，这样就可以正常方位后端接口了，配置如下：

server {
    listen  8193;
    server_name  localhost 127.0.0.1;
    location / {
        root D:\agent\html;
        index  index.html  index.htm;
    }
}

vue工程中 配置后端IP地址如下：

const instance = axios.create({
    baseURL: process.env.NODE_ENV === 'development' ? '/api' : '192.168.1.128:8185',
    timeout: 10000,
    headers: {
        'Content-Type': 'application/json;charset=UTF-8'
    }
})

在浏览器中输入  localhost:8193  打开前端网页，但出现了后端接口请求跨域问题。原因是localhost:8193  和发送的后端请求192.168.1.128:8185 IP 和 端口都不同，所以出现了跨域。

我们在nginx上配置转发就可以解决此跨域问题，修改步骤如下：

1. 在nginx代理服务器配置文件中配置上转发，配置如下：

server {
    listen  8193;
    server_name  localhost 127.0.0.1;
    location / {
        root D:\agent\html;
        index  index.html