一、描述
??當http://localhost:8080/abc請求http://10.10.10.10:1000/abc，出現(xiàn)跨域請求問題時，利用nginx反向代理是一種解決方案。參考：nginx反向代理解決跨域問題
二、流程
??將項目部署到nginx的html文件夾下，配置nginx.conf文件，然后通過cmd進入管理員界面，切換至nginx-1.12.2目錄下，啟動nginx.exe的命令：start nginx.exe，退出nginx.exe的命令：nginx.exe -s quit。（注：這里請求參數(shù)與返回數(shù)據(jù)為json格式，需進行格式轉(zhuǎn)換）
三、具體實現(xiàn)
1、前端ajax請求，代碼如下：
var params = {"鍵1": "值1","鍵2": "值2"};
$ajax({
type: "post",
datatype: "text",
// 添加`/api/`作為匹配項
url: "/api/abc",
// 如果ajax的application/json方式，data參數(shù)是字符串類型的，使用JSON.stringify()轉(zhuǎn)換
data: JSON.stringify(params),
success: function(data){
//如果返回數(shù)據(jù)是json字符串，使用JSON.parse()轉(zhuǎn)換
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、以上配置已經(jīng)解決跨域問題，下面是一些其他問題簡單配置，可不看
- 添加請求頭信息，在
$.ajax({})中添加如下代碼：
beforeSend: function(xhr) {
xhr.setRequestHeader("Content-type","application/json;charset-utf-8");
xhr.setRequestHeader("Accept","application/json,text/plain,/*/");
}
- 運行形式：
file>>>localhost
（1）安裝HBuilder，導入項目，直接運行調(diào)試頁面
（2）安裝Nginx，部署項目并啟動，運行調(diào)試頁面，可解決跨域問題。 安裝教程：windows下安裝nginx
