利用nginx反向代理解决跨域问题

一、描述

  当http://localhost:8080/abc请求http://10.10.10.10:1000/abc，出现跨域请求问题时，利用nginx反向代理是一种解决方案。参考：nginx反向代理解决跨域问题

二、流程

  将项目部署到nginx的html文件夹下，配置nginx.conf文件，然后通过cmd进入管理员界面，切换至nginx-1.12.2目录下，启动nginx.exe的命令：start nginx.exe，退出nginx.exe的命令：nginx.exe -s quit。（注：这里请求参数与返回数据为json格式，需进行格式转换）

三、具体实现

1、前端ajax请求，代码如下：

var params = {"键1": "值1","键2": "值2"};
$ajax({
  type: "post",
  datatype: "text",
  // 添加`/api/`作为匹配项
  url: "/api/abc",
  // 如果ajax的application/json方式，data参数是字符串类型的，使用JSON.stringify()转换
  data: JSON.stringify(params),
  success: function(data){
    //如果返回数据是json字符串，使用JSON.parse()转换
    console.log(JSON.parse(data));
  },
  error: function(err){
    console.log(err);
  }
})

2、nginx.conf配置文件

  server {
    listen  8080;
    server_name  localhost;
    location / {
      root html;
      index index.html index.htm;
    }
    //一般只需要在该处添加代理配置信息
    location /api/ {
      rewrite  ^.+/api/?(.*)$ /$1 break;
      include  uwsgi_params;
      proxy_pass  http://10.10.10.10:1000/;
    } 
  }

3、以上配置已经解决跨域问题，下面是一些其他问题简单配置，可不看

• 添加请求头信息，在$.ajax({})中添加如下代码：

beforeSend: function(xhr) {
  xhr.setRequestHeader("Content-type","application/json;charset-utf-8");
  xhr.setRequestHeader("Accept","application/json,text/plain,/*/");
}

• 运行形式：file>>>localhost
  （1）安装HBuilder，导入项目，直接运行调试页面
  （2）安装Nginx，部署项目并启动，运行调试页面，可解决跨域问题。 安装教程：windows下安装nginx