nginx 反向代理解决跨域

背景

1. 后端api域名：xx.beta1.xn
2. 前端本地页面静态服务器：localhost:8080 ( 项目不在nginx对应目录下，还会本地host代理一层 )
3. 后端接口不支持jsonp、没有加白名单、更没有设置相关代理等

问题

后端提供的接口不支持跨域访问，前端开发人员不能访问正式数据进行接口联调

常规处理情况

• 情况一 ：【后端接口未完成】阶段，可以先让后端提供静态的json数据，本地mock假数据进行数据绑定，这种情况都是本地静态数据，没有跨域之说
• 情况二 ：【后端接口完成】阶段，并且接口不支持跨域的情况下，前端怎么样调取接口数据

这里单独讲解一下如何使用 nginx 代理转发解决跨域访问

步骤：

1. windows系统到nginx官网下载相关程序(去下载： nginx.org/ )，然后修改配置文件

   nginx-1.13.9/conf/nginx.conf mac 系统的个人感觉比较好用，下载的方法也太多了，这里就不多说了，直接上配置：

server{
        listen  80;
        server_name  go.beta1.xn;
        #跨域请求

        add_header 'Access-Control-Allow-Origin' '*';  
        add_header 'Access-Control-Allow-Credentials' 'true';
        location / {
            proxy_pass  http://127.0.0.1:8080;
        } 
        location /app {
            proxy_pass  http://xx.beta1.xn/app;
        }
}
复制代码

这样配置的意思就是如果本地访问 go.beta1.xn/app 其实是被转发到到要跨域的服务器上，就是以上代码中的：yx.beta1.fn/app部分

2. 配置本机host C:\Windows\System32\drivers\etc\hosts

127.0.0.1 go.beta1.xn
复制代码

3. 代码示例：

post请求:

let {data} = await api.post(`/app/goods/detail/${config.apiVersion}`,
复制代码

Headers:

Request URL:http://go.beta1.xn/app/goods/detail/t109
复制代码

其实就如同访问：xx.beta1.xn/app/goods/d…

结束语

谢谢

转载于:https://juejin.im/post/5ab1f5336fb9a028d043514f