如何用Nginx解決前端跨域問題

2022-09-25 02:15:09 字數 1049 閱讀 4620

前言

在開發靜態頁面時,類似vue的應用,我們常會呼叫一些介面,這些介面極可能是跨域,然後瀏覽器就會報crosswww.cppcns.com-origin問題不給調。

最簡單的解決方法,就是把瀏覽器設為忽略安全問題,設定--disable-web-security。不過這種方式開發pc頁面到還好,如果是移動端頁面就不行了。

解決辦法

使用nginx**請求。把跨域的介面寫成調本域的介面,然後將這些介面**到真正的請求位址。

舉個栗子

例如我們在開發乙個vue應用。

原先:除錯頁面是:

請求的介面是:

步驟一:

請求的介面是: api/get/info

ps:這樣就解決了跨域問題。

步驟二:

安裝好nginx後,去到/usr/local/etc/nginx/目錄(這是mac的),修改nginx.conf檔案。

步驟三:

把預設的server配置注釋掉。

在下面增加:

server

location /api

}儲存後,啟動nginx。

ps:並不需要太了解nginx的配置,很簡單的atskcmnq。

步驟四:

訪問:

搞定。ps:注意訪問的埠是『8888',有其他域的位址繼續加location就行了。

錯誤示範

我一開始不太懂nginx的配置,以為可以如下配置。

server

}之所以這麼寫,是我認為這樣可以讓nginx幫我監聽8080的請求,然後只**匹配的請求。我沒有意識到的是nginx這麼寫後,是需要占用8080埠的。

既然需要占用埠,那也就不程式設計客棧能再被其他相同協議的程序占用,就導致開發www.cppcns.com的頁面無法以8080埠啟用。經同事提點,才想起這事情,換下思路,就有了最上面的方法。

總結其實不僅是在開發除錯時候能這麼幹,在生產環境也能這麼玩。利用nginx**請求之後,就能夠讓所要部署的靜態頁面不需要放在跟請求介面同域的地方。

本文標題: 如何用nginx解決前端跨域問題

本文位址:

Nginx 使用Nginx完美解決前端跨域問題

前端開發時,我們呼叫介面大部分都是跨域的,然後瀏覽器就會報cors問題,導致我們不能正常呼叫介面拿到響應資料。今天我們來使用nginx完美解決前端跨域問題,學會了這個方法,以後所有的跨域問題在我們面前都不是問題了。talk is cheap,show me the code.使用nginx 請求,把...

nginx解決前端開發跨域問題

1 首先你需要擁有一台nginx伺服器 在此不具體講nginx 2 在nginx.config裡面進行反向 的配置,具體 如下 前端開發環境配置 server 配置後端介面 location xbproject error page 500 502 503 504 50x.html location...

如何用Nginx解決跨域問題?一文了解

一.產生跨域的原因 1.瀏覽器限制 2.跨域 3.xhr xmlhttprequest 請求 二.解決思路 解決跨域有多重,在這裡主要講用nginx解決跨域 1.jsonp 2.nginx 四.nginx反向 解決跨域 客戶端解決跨域 1.我們使用jquery的ajax傳送請求,node開啟後台服務...