這篇文章主要介紹“如何利用Nginx處理Vue開(kāi)發(fā)環(huán)境的跨域問(wèn)題”的相關(guān)知識(shí)，小編通過(guò)實(shí)際案例向大家展示操作過(guò)程，操作方法簡(jiǎn)單快捷，實(shí)用性強(qiáng)，希望這篇“如何利用Nginx處理Vue開(kāi)發(fā)環(huán)境的跨域問(wèn)題”文章能幫助大家解決問(wèn)題。

讓客戶滿意是我們工作的目標(biāo)，不斷超越客戶的期望值來(lái)自于我們對(duì)這個(gè)行業(yè)的熱愛(ài)。我們立志把好的技術(shù)通過(guò)有效、簡(jiǎn)單的方式提供給客戶，將通過(guò)不懈努力成為客戶在信息化領(lǐng)域值得信任、有價(jià)值的長(zhǎng)期合作伙伴，公司提供的服務(wù)項(xiàng)目有：空間域名、網(wǎng)站空間、營(yíng)銷軟件、網(wǎng)站建設(shè)、湘鄉(xiāng)網(wǎng)站維護(hù)、網(wǎng)站推廣。

1. 需求

本地測(cè)試域名與線上域名相同，以便正確傳遞 cookie 和進(jìn)行 sso 測(cè)試。

注：由于 sso 登錄后，相關(guān) cookie 被加在四級(jí)域名上，因而需要做到本地測(cè)試域名和線上接口域名相同。

2. 方案

配置 host 文件使線上域名指向 localhost：

127.0.0.1 product.xxx.xxx.com

配置 nginx 進(jìn)行對(duì)應(yīng)轉(zhuǎn)發(fā)：

server {
  listen    80;
  listen    [::]:80;
  server_name ${product.xxx.xxx.com};

  location /api {
    proxy_pass https://${ip.ip.ip.ip};
    proxy_set_header host $host;
  }

  location / {
    proxy_pass http://localhost:8080;
    proxy_set_header host $host;
  }  
}

配置 vue.config.js 以免出現(xiàn) invalid host header 報(bào)錯(cuò)：

{
  devserver: {
    disablehostcheck: true
  }
}

關(guān)于“如何利用Nginx處理Vue開(kāi)發(fā)環(huán)境的跨域問(wèn)題”的內(nèi)容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業(yè)相關(guān)的知識(shí)，可以關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道，小編每天都會(huì)為大家更新不同的知識(shí)點(diǎn)。