在使用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端口。