一、描述
当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
