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

經驗：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端口。