vuecli3打包后出現(xiàn)跨域問題,前端配置攔截器無(wú)效的解決
更新時(shí)間:2022年06月02日 14:31:33 作者:圓內(nèi)~擱淺
這篇文章主要介紹了vuecli3打包后出現(xiàn)跨域問題,前端配置攔截器無(wú)效的解決,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
打包后跨域問題,前端配置攔截器無(wú)效
問題
這幾天在把項(xiàng)目弄好,打包完成后發(fā)現(xiàn)之前cli配置的攔截器沒有在打包后沒起到作用,使用別的方法通過nginx反向代理進(jìn)行配置跨域。
解決方案
在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è)置為項(xiàng)目的根路徑 autoindex on; #開啟nginx目錄瀏覽功能 autoindex_exact_size off; #文件大小從KB開始顯示 charset utf-8; #顯示中文 add_header 'Access-Control-Allow-Origin' '*'; #允許來(lái)自所有的訪問地址 add_header 'Access-Control-Allow-Credentials' 'true'; add_header 'Access-Control-Allow-Methods' 'GET, PUT, POST, DELETE, OPTIONS'; #支持請(qǐng)求方式 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處理跨域問題
在項(xiàng)目根目錄新建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
則在這個(gè)文件添加
module.exports = { ? ? devServer: { ? ? ? ? proxy: { ? ? ? ? ? ? '/api': { ? ? ? ? ? ? ? ? target: 'http://www.example.com:81', //接口域名,端口看各自設(shè)置的 ? ? ? ? ? ? ? ? changeOrigin: true, ? ? ? ? ? ? //是否跨域 ? ? ? ? ? ? ? ? ws: true, ? ? ? ? ? ? ? ? ? ? ? //是否代理 websockets ? ? ? ? ? ? ? ? secure: true, ? ? ? ? ? ? ? ? ? //是否https接口 ? ? ? ? ? ? ? ? pathRewrite: { ? ? ? ? ? ? ? ? ?//路徑重置 ? ? ? ? ? ? ? ? ? ? '^/api': '' ? ? ? ? ? ? ? ? } ? ? ? ? ? ? } ? ? ? ? } ? ? } };
以上為個(gè)人經(jīng)驗(yàn),希望能給大家一個(gè)參考,也希望大家多多支持腳本之家。
相關(guān)文章
關(guān)于vue項(xiàng)目一直出現(xiàn) sockjs-node/info?t=XX的解決辦法
sockjs-node 是一個(gè)JavaScript庫(kù),提供跨瀏覽器JavaScript的API,創(chuàng)建了一個(gè)低延遲、全雙工的瀏覽器和web服務(wù)器之間通信通道,這篇文章主要介紹了vue項(xiàng)目一直出現(xiàn) sockjs-node/info?t=XX的解決辦法,需要的朋友可以參考下2023-12-12vue.js實(shí)例todoList項(xiàng)目
本篇文章主要介紹了vue.js實(shí)例todoList項(xiàng)目,小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過來(lái)看看吧2017-07-07解決vue-cli@3.xx安裝不成功的問題及搭建ts-vue項(xiàng)目
這篇文章主要介紹了解決vue-cli@3.xx安裝不成功的問題及搭建ts-vue項(xiàng)目.文中通過示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2020-02-02