經驗：VUE3（vite）使用百度智慧雲API時出現的跨域問題解決辦法

專案簡介：通過vue的admin框架（axios）請求百度智慧雲人臉識別相關API介面時出現跨域錯誤，在本地環境下測試正常，可以正常訪問介面且功能全部正常，將專案build後部署到伺服器，開啟網頁後傳送所有百度請求出現跨域問題的解決方法。

第一步：看本地代理 如果本地代理名字叫api的話，反向代理名字也是api（看src下的api資料夾）

第二步：看.env.production（生產環境）下的

# 介面請求地址，會設定到 axios 的 baseURL 引數上

VITE_APP_API_BASEURL = https://www.xxxxxx.xxx/api

第三步：兩種方法任意一種都可以

（方法一）：看寶塔面板網站的配置檔案裡面是否在SSL證書文字的下面繼續新增，重點是第一句的正則表達

location ~ ^/(api)/.* {
    rewrite  ^.+api/?(.*)$ /$1 break;
    include  uwsgi_params;
    root  /usr/share/nginx/html;
    proxy_pass https://aip.baidubce.com;
    \#  proxy_set_header Host $http_host;
}

（方法二）：看網頁反向代理裡面的配置檔案，重點在location /api/這個規則裡裡面的rewrite ^.+api/?(.*)$ /$1 break; 這句正則表達匹配請求

#PROXY-START/
location ~* \.(gif|png|jpg|css|js|woff|woff2)$
{
    proxy_pass https://aip.baidubce.com;
    proxy_set_header Host aip.baidubce.com;
    proxy_set_header X-Real-IP $remote_addr;
    proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
    proxy_set_header REMOTE-HOST $remote_addr;
    expires 12h;
}

location /api/
{
    rewrite  ^.+api/?(.*)$ /$1 break;
    proxy_pass https://aip.baidubce.com;
    proxy_set_header Host aip.baidubce.com;
    proxy_set_header X-Real-IP $remote_addr;
    proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
    proxy_set_header REMOTE-HOST $remote_addr;

    add_header X-Cache $upstream_cache_status;

    \#Set Nginx Cache

		add_header Cache-Control no-cache;
      proxy_intercept_errors on;
      error_page 301 302 307 = @handle_redirects;
      }

      location @handle_redirects {
		set $saved_redirect_location 'https://aip.baidubce.com';
		proxy_pass $saved_redirect_location;
	}

\#PROXY-END/
 

同時注意：如果請求地址是https，而自己的頁面是http，則需要將自己的網站也通過寶塔SSL功能申請證書，新增為HTTPS，否則依然會存在跨域問題。

所涉及到的nginx相關知識點：

Rewite 規則

• Rewrite規則可以實現對url的重寫，以及重定向

作用場景：

• URL訪問跳轉，支援開發設計，如頁面跳轉，相容性支援，展示效果等

• SEO優化

• 維護：後臺維護、流量轉發等

• 安全

  簡單例項：

  rewrite ^(.*)$ /pages/maintain.html ``break``;
  

  解釋說明：

  • 會把所有的請求都重定向到 /pages/maintain.html 頁面

  • 常用的正則表示式

  • $1表示路徑中正則表示式匹配的第一個引數

設定網站為HTTPS後，寶塔面板或者網站無法正常開啟

解決辦法：通過ping該網站拿到網站ip後新增：面板埠號後即可解決（面板仍然為http模式，如果打不開就清理瀏覽器全部快取後重新開啟瀏覽器進入寶塔面板）；並且需要放行寶塔面板安全中TPPS的埠，埠號：443，同時雲伺服器的安全組策略中也需要放行443埠。