vuecli3打包后出現(xiàn)跨域問題,前端配置攔截器無效的解決

更新時間：2022年06月02日 14:31:33 作者：圓內(nèi)~擱淺

這篇文章主要介紹了vuecli3打包后出現(xiàn)跨域問題,前端配置攔截器無效的解決，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教

打包后跨域問題,前端配置攔截器無效

問題

這幾天在把項目弄好，打包完成后發(fā)現(xiàn)之前cli配置的攔截器沒有在打包后沒起到作用，使用別的方法通過nginx反向代理進行配置跨域。

解決方案

在nginx里面的nginx.config里面配置

配置如下

server {
        listen       80;#監(jiān)聽端口
        server_name  localhost;#代理服務(wù)地址
        add_header Access-Control-Allow-Origin *;
        location / {
            root C:/nginx-1.19.0/html/dist; #根目錄!!,把這里路徑設(shè)置為項目的根路徑
            autoindex on;       #開啟nginx目錄瀏覽功能
            autoindex_exact_size off;   #文件大小從KB開始顯示
            charset utf-8;          #顯示中文
            add_header 'Access-Control-Allow-Origin' '*'; #允許來自所有的訪問地址
            add_header 'Access-Control-Allow-Credentials' 'true';
            add_header 'Access-Control-Allow-Methods' 'GET, PUT, POST, DELETE, OPTIONS'; #支持請求方式
            add_header 'Access-Control-Allow-Headers' 'Content-Type,*';
        }
        #開始配置我們的反向代理
        location /apis{//cli配置的接口名
           rewrite ^/apis/(.*)$ /$1 break;
           include uwsgi_params;
           proxy_set_header   Host             $host;
           proxy_set_header   x-forwarded-for  $remote_addr;
           proxy_set_header   X-Real-IP        $remote_addr;
           proxy_pass  http://*****:8080;//接口
        }
        
          location /topicByCate{//cli配置的接口名
           rewrite ^/topicByCate/(.*)$ /$1 break;
           include uwsgi_params;
           proxy_set_header   Host             $host;
           proxy_set_header   x-forwarded-for  $remote_addr;
           proxy_set_header   X-Real-IP        $remote_addr;
           proxy_pass  https://******.com;//接口
        }
        location @router {
            rewrite ^.*$ /index.html last;
        }
    }

vue3處理跨域問題

在項目根目錄新建vue.config.js輸入

module.exports = {
? ? devServer: {
? ? ? ? proxy: {
? ? ? ? ? ? '/api': {
? ? ? ? ? ? ? ? target: 'http://www.example.com:81/', //接口域名，端口看各自設(shè)置的
? ? ? ? ? ? ? ? changeOrigin: true, ? ? ? ? ? ? //是否跨域
? ? ? ? ? ? ? ? ws: true, ? ? ? ? ? ? ? ? ? ? ? //是否代理 websockets
? ? ? ? ? ? ? ? secure: true, ? ? ? ? ? ? ? ? ? //是否https接口
? ? ? ? ? ? ? ? pathRewrite: { ? ? ? ? ? ? ? ? ?//路徑重置
? ? ? ? ? ? ? ? ? ? '^/api': ''
? ? ? ? ? ? ? ? }
? ? ? ? ? ? }
? ? ? ? }
? ? }
};

如用到的是vite.config.js

則在這個文件添加

module.exports = {
? ? devServer: {
? ? ? ? proxy: {
? ? ? ? ? ? '/api': {
? ? ? ? ? ? ? ? target: 'http://www.example.com:81', //接口域名,端口看各自設(shè)置的
? ? ? ? ? ? ? ? changeOrigin: true, ? ? ? ? ? ? //是否跨域
? ? ? ? ? ? ? ? ws: true, ? ? ? ? ? ? ? ? ? ? ? //是否代理 websockets
? ? ? ? ? ? ? ? secure: true, ? ? ? ? ? ? ? ? ? //是否https接口
? ? ? ? ? ? ? ? pathRewrite: { ? ? ? ? ? ? ? ? ?//路徑重置
? ? ? ? ? ? ? ? ? ? '^/api': ''
? ? ? ? ? ? ? ? }
? ? ? ? ? ? }
? ? ? ? }
? ? }
};

以上為個人經(jīng)驗，希望能給大家一個參考，也希望大家多多支持腳本之家。

您可能感興趣的文章: