這篇文章主要介紹了怎么用Nginx解決前端跨域問題，具有一定借鑒價(jià)值，感興趣的朋友可以參考下，希望大家閱讀完這篇文章之后大有收獲，下面讓小編帶著大家一起了解一下。

創(chuàng)新互聯(lián)是一家專業(yè)的成都網(wǎng)站建設(shè)公司，我們專注網(wǎng)站制作、成都網(wǎng)站建設(shè)、網(wǎng)絡(luò)營銷、企業(yè)網(wǎng)站建設(shè)，外鏈，1元廣告為企業(yè)客戶提供一站式建站解決方案，能帶給客戶新的互聯(lián)網(wǎng)理念。從網(wǎng)站結(jié)構(gòu)的規(guī)劃UI設(shè)計(jì)到用戶體驗(yàn)提高，創(chuàng)新互聯(lián)力求做到盡善盡美。

前言

在開發(fā)靜態(tài)頁面時(shí)，類似Vue的應(yīng)用，我們常會調(diào)用一些接口，這些接口極可能是跨域，然后瀏覽器就會報(bào)cross-origin問題不給調(diào)。

最簡單的解決方法，就是把瀏覽器設(shè)為忽略安全問題，設(shè)置--disable-web-security。不過這種方式開發(fā)PC頁面到還好，如果是移動(dòng)端頁面就不行了。

解決辦法

使用Nginx轉(zhuǎn)發(fā)請求。把跨域的接口寫成調(diào)本域的接口，然后將這些接口轉(zhuǎn)發(fā)到真正的請求地址。

舉個(gè)栗子

例如我們在開發(fā)一個(gè)Vue應(yīng)用。

原先：

調(diào)試頁面是： http://192.168.1.100:8080/

請求的接口是： http://ni.hao.sao/api/get/info

步驟一：

請求的接口是： http://192.168.1.100:8080/api/get/info

PS：這樣就解決了跨域問題。

步驟二：

安裝好Nginx后，去到/usr/local/etc/nginx/目錄（這是Mac的），修改nginx.conf文件。

步驟三：

把默認(rèn)的server配置注釋掉。

在下面增加：

  server{
    listen 8888;
    server_name 192.168.1.100;
 
    location /{
      proxy_pass http://192.168.1.100:8080;
    }
 
    location /api{
      proxy_pass http://ni.hao.sao/api;
    }
  }

保存后，啟動(dòng)Nginx。

PS：并不需要太了解Nginx的配置，很簡單的。

步驟四：

訪問： http://192.168.1.100:8888/

搞定。

PS：注意訪問的端口是‘8888'，有其他域的地址繼續(xù)加location就行了。

錯(cuò)誤示范

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

  server{
    listen 8080;
    server_name 192.168.1.100;
 
    location /api{
      proxy_pass http://ni.hao.sao/api;
    }
  }

之所以這么寫，是我認(rèn)為這樣可以讓Nginx幫我監(jiān)聽8080的請求，然后只轉(zhuǎn)發(fā)匹配的請求。我沒有意識到的是Nginx這么寫后，是需要占用8080端口的。

既然需要占用端口，那也就不能再被其他相同協(xié)議的進(jìn)程占用，就導(dǎo)致開發(fā)的頁面無法以8080端口啟用。經(jīng)同事提點(diǎn)，才想起這事情，換下思路，就有了最上面的方法。

感謝你能夠認(rèn)真閱讀完這篇文章，希望小編分享的“怎么用Nginx解決前端跨域問題”這篇文章對大家有幫助，同時(shí)也希望大家多多支持創(chuàng)新互聯(lián)，關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道，更多相關(guān)知識等著你來學(xué)習(xí)!

本文名稱：怎么用Nginx解決前端跨域問題-創(chuàng)新互聯(lián)
本文地址：http://www.chinadenli.net/article22/djopjc.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供App開發(fā)、面包屑導(dǎo)航、網(wǎng)站策劃、搜索引擎優(yōu)化、網(wǎng)站排名、網(wǎng)站建設(shè)

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源： 創(chuàng)新互聯(lián)