生活随笔
收集整理的這篇文章主要介紹了
跨域问题解决方案--Nginx代理转发
小編覺得挺不錯的,現(xiàn)在分享給大家,幫大家做個參考.
文章目錄
問題描述
有這么一個html頁面，具體代碼如下：
Nginx_CORS.html
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>跨域問題-Nginx代理轉(zhuǎn)發(fā)
</title><script src="js/jquery-2.1.1.min.js"></script>
</head><body><script>$.ajax({type: 'GET',url: 'https://www.csdn.net/api/articles?type=more&category=home&shown_offset=1524276761019196&first_view=false',success: function(result) {document.writeln("fetch success!");let article = result.articles[0];for (const key in article) {if (article.hasOwnProperty(key)) {const element = article[key];document.writeln(element + '<br/>');}}document.writeln(result);},error: function() {document.writeln("fetch failed!");}});</script></body></html>
當(dāng)在瀏覽器中打開時(不是在文件管理系統(tǒng)直接雙擊打開，非file://協(xié)議，在http://或https://訪問)，控制臺報錯。
圖1.瀏覽器打開界面
問題很明顯，一個在http://127.0.0.1:5500域下的頁面要訪問http://www.csdn.net域的接口，跨域了，瀏覽器不允許這么干。
解決方案
既然頁面和接口不在同一域名下，我想辦法給他搞到“同一域名”下。可以利用Nginx的代理轉(zhuǎn)發(fā)功能。
首先設(shè)置監(jiān)聽的端口(8080)與服務(wù)名(localhost)，當(dāng)你在瀏覽器中訪問該服務(wù)名與端口組成的域名(http://localhost:8080)時，會被Nginx給監(jiān)聽到。這時候通過設(shè)置Nginx的配置，Nginx幫你轉(zhuǎn)到前面的html(Nginx_CORS.html)頁面。當(dāng)html頁面加載時會發(fā)出一個接口請求(https://www.csdn.net/api/…),我事先在代碼中把這個接口請求的url參數(shù)改成*/api/，把前面的域名去掉，這樣瀏覽器看到你發(fā)出的請求地址是http://localhost:8080/api/…。對于瀏覽器來說html頁面的域名是http://localhost:8080*，接口請求的域名也是http://localhost:8080，因此不會出現(xiàn)跨域問題。剩下的問題就是http://localhost:8080/api/…這個接口我沒有啊，這個接口請求也是可以被Nginx監(jiān)聽到的，通過設(shè)置Nginx讓所有以http://localhost:8080/api開頭的請求被轉(zhuǎn)發(fā)到https://www.csdn.net,就可以獲取結(jié)果了。
如果以 Nginx_CORS.html進行整個過程的話：
安裝 Nginx;修改配置文件 conf/nginx.conf;
啟動 nginx;瀏覽器中輸入 http://localhost:8080/api/articles?type=more&category=home&shown_offset=1524276761019196&first_view=false 進行測試，如果有返回結(jié)果，說明nginx代理配置沒有問題;
修改 Nginx_CORS.html 代碼，主要是請求的url;
$
.ajax({type
: 'GET',url
: '/api/articles?type=more&category=home&shown_offset=1524276761019196&first_view=false',success
: function(result
) {document
.writeln("fetch success!");let article
= result
.articles
[0];for (const key
in article
) {if (article
.hasOwnProperty(key
)) {const element
= article
[key
];document
.writeln(element
+ '<br/>');}}document
.writeln(result
);},error
: function() {document
.writeln("fetch failed!");}});
瀏覽器中輸入 http://localhost:8080,出現(xiàn)類似下圖
總結(jié)
以上是生活随笔為你收集整理的跨域问题解决方案--Nginx代理转发的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。
