nginx代理解决api跨域问题，在线测试

nginx

发布日期: 2021-04-06

文章字数: 618

阅读时长: 2 分

阅读次数:

nginx反向代理接口，配置跨域并做在线测试
简书地址

今天部署野火IM的server端，部署好了以后一直用ip+port测试接口的，测试没问题以后交给前端去使用。

没想到反馈来的第一个问题居然是接口报跨域错误，想想也是，一般程序里也不会考虑这么全，给你把啥都搞好了。

也许应该在接口层自己写filter或者加cros的注解一类的，但是我不熟悉项目的架构，加上时间紧迫，我就采取了nginx转发，在nginx做跨域配置的方案。虽然文章一大篇，但是还是自己给自己做一个笔记吧。

nginx代理配置

在nginx中增加以下配置，代理原来的ip+端口访问的api

server &#123;
    listen 80;
    server_name imtest.xxx.com;

    location / &#123;
        proxy_set_header Host $host:$server_port;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header REMOTE-HOST $remote_addr;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        proxy_pass http://127.0.0.1:18080/;
        client_max_body_size 100m;

        #   指定允许跨域的方法，*代表所有
        add_header Access-Control-Allow-Methods *;

        #   预检命令的缓存，如果不缓存每次会发送两次请求
        add_header Access-Control-Max-Age 3600;
        #   带cookie请求需要加上这个字段，并设置为true
        add_header Access-Control-Allow-Credentials true;

        #   表示允许这个域跨域调用（客户端发送请求的域名和端口）
        #   $http_origin动态获取请求客户端请求的域   不用*的原因是带cookie的请求不支持*号
        add_header Access-Control-Allow-Origin $http_origin;

        #   表示请求头的字段 动态获取
        add_header Access-Control-Allow-Headers
        $http_access_control_request_headers;

        #   OPTIONS预检命令，预检命令通过时才发送请求
        #   检查请求的类型是不是预检命令
        if ($request_method = OPTIONS)&#123;
            return 200;
        &#125;

    &#125;

&#125;

在线测试

浏览器打开一个空白的tab，打开开发者模式，在console中，一次性copy以下代码，回车。进行测试

get请求

var xhr = new XMLHttpRequest();
xhr.open('GET', 'https://www.xxx.com/api/action?page=1&size=10"');
xhr.send(null);
// xhr.send(&#123; form: 'data' &#125;);
xhr.onload = function(e) &#123;
 // 请求结束后,在此处写处理代码
    var xhr = e.target;
    console.log(xhr.responseText);
&#125;

post请求

var params = &#123;
  "password": "Test,123",
  "username": "A0026212"
&#125;;
var xhr = new XMLHttpRequest();
xhr.open('POST', 'https://testplattestapi.cosmoplat.com/cosmo/public/v1/admin/auth/token');
xhr.setRequestHeader('Content-Type', 'application/json');
xhr.send(JSON.stringify(params));
xhr.onload = function(e) &#123;
 // 请求结束后,在此处写处理代码
    var xhr = e.target;
    console.log(xhr.responseText);
&#125;