首頁 > 軟體

vuecli3打包後出現跨域問題,前端設定攔截器無效的解決

2022-06-02 18:01:11

打包後跨域問題,前端設定攔截器無效

問題

這幾天在把專案弄好,打包完成後發現之前cli設定的攔截器沒有在打包後沒起到作用,使用別的方法通過nginx反向代理進行設定跨域。

解決方案

在nginx裡面的nginx.config裡面設定

設定如下

server {
        listen       80;#監聽埠
        server_name  localhost;#代理服務地址
        add_header Access-Control-Allow-Origin *;
        location / {
            root C:/nginx-1.19.0/html/dist; #根目錄!!,把這裡路徑設定為專案的根路徑
            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/', //介面域名,埠看各自設定的
                changeOrigin: true,             //是否跨域
                ws: true,                       //是否代理 websockets
                secure: true,                   //是否https介面
                pathRewrite: {                  //路徑重置
                    '^/api': ''
                }
            }
        }
    }
};

如用到的是vite.config.js

則在這個檔案新增

module.exports = {
    devServer: {
        proxy: {
            '/api': {
                target: 'http://www.example.com:81', //介面域名,埠看各自設定的
                changeOrigin: true,             //是否跨域
                ws: true,                       //是否代理 websockets
                secure: true,                   //是否https介面
                pathRewrite: {                  //路徑重置
                    '^/api': ''
                }
            }
        }
    }
};

以上為個人經驗,希望能給大家一個參考,也希望大家多多支援it145.com。


IT145.com E-mail:sddin#qq.com