今天小編給大家分享一下nginx跨域問題如何解決的相關(guān)知識點，內(nèi)容詳細(xì)，邏輯清晰，相信大部分人都還太了解這方面的知識，所以分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后有所收獲，下面我們一起來了解一下吧。

公司主營業(yè)務(wù)：成都網(wǎng)站設(shè)計、成都網(wǎng)站制作、移動網(wǎng)站開發(fā)等業(yè)務(wù)。幫助企業(yè)客戶真正實現(xiàn)互聯(lián)網(wǎng)宣傳，提高企業(yè)的競爭能力。成都創(chuàng)新互聯(lián)公司是一支青春激揚、勤奮敬業(yè)、活力青春激揚、勤奮敬業(yè)、活力澎湃、和諧高效的團(tuán)隊。公司秉承以“開放、自由、嚴(yán)謹(jǐn)、自律”為核心的企業(yè)文化，感謝他們對我們的高要求，感謝他們從不同領(lǐng)域給我們帶來的挑戰(zhàn)，讓我們激情的團(tuán)隊有機(jī)會用頭腦與智慧不斷的給客戶帶來驚喜。成都創(chuàng)新互聯(lián)公司推出寧強(qiáng)免費做網(wǎng)站回饋大家。

前后端分離，使用nginx解決跨域問題

前端：vue.js+nodejs+webpack

后臺：springboot

反向代理服務(wù)器：nginx

思想：將前端代碼打包，讓nginx指向靜態(tài)資源，nginx對后臺請求進(jìn)行轉(zhuǎn)發(fā)。

1、將前端代碼打包：

npm run build

會生成一個dist文件夾。包含一個index.html文件和一個static文件夾，路徑以我本地為例：

/users/xxx/ideaprojects/webtest/dist

2、打開

/usr/local/etc/nginx目錄下的nginx.conf，在server中添加如下：

listen  80; #原為8080，避免沖突，更改為80

  server_name localhost;

 

  #charset koi8-r;

 

  #access_log logs/host.access.log main;

 

 

  location / {

   root /users/xxx/ideaprojects/webtest/dist;

   index index.html;

    

   # 此處用于處理 vue、angular、react 使用h5 的 history時 重寫的問題

   if (!-e $request_filename) {

    rewrite ^(.*) /index.html last;

    break;

   }

  }

 

 

  # 代理服務(wù)端接口

  location /api/ {

   proxy_pass http://localhost:8080/;# 代理接口地址

  }

測試

前端發(fā)送請求：http://localhost/test ，vue-router將其重定向為http://localhost/api/demo/1，實際訪問是http://localhost:8080/demo/1。

直接向后臺發(fā)送請求：訪問http://localhost/api/demo/1，實際訪問是：http://localhost:8080/demo/1

內(nèi)容擴(kuò)展思考：

1).
# 代理服務(wù)端接口

location /api/ {
proxy_pass http://localhost:8080/;# 代理接口地址
}

代理接口地址只到8080，那么他會自動將后臺項目的名稱加上？？？ 比如接口是http://148.70.110.87:8080/項目名稱/方法名稱 。。。

2).js 中是這樣請求的 ，nginx是按照您上面的配置，但是請求出錯http://148.70.110.87/api/index2 404 (not found)

axios.post('/api/index2')
.then( (response) =>{
console.log(response);
})
.catch( (error)=> {
console.log(error);
});

3).第三個步驟，測試，實在看不懂要是能有相關(guān)的代碼就好了

以上就是“nginx跨域問題如何解決”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家閱讀完這篇文章都有很大的收獲，小編每天都會為大家更新不同的知識，如果還想學(xué)習(xí)更多的知識，請關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道。

分享名稱：nginx跨域問題如何解決
轉(zhuǎn)載源于：http://chinadenli.net/article40/pgjpho.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)站內(nèi)鏈、網(wǎng)站營銷、動態(tài)網(wǎng)站、自適應(yīng)網(wǎng)站、軟件開發(fā)、品牌網(wǎng)站建設(shè)

廣告

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