欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

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)文章

  • 基于Vue實(shí)例生命周期(全面解析)

    基于Vue實(shí)例生命周期(全面解析)

    下面小編就為大家?guī)?lái)一篇基于Vue實(shí)例生命周期(全面解析)。小編覺得挺不錯(cuò)的,現(xiàn)在就分享給大家,也給大家做個(gè)參考。一起跟隨小編過來(lái)看看吧
    2017-08-08
  • 關(guān)于vue項(xiàng)目一直出現(xiàn) sockjs-node/info?t=XX的解決辦法

    關(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-12
  • VueJS如何引入css或者less文件的一些坑

    VueJS如何引入css或者less文件的一些坑

    本篇文章主要介紹了VueJS如何引入css或者less文件的一些坑,小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過來(lái)看看吧
    2017-04-04
  • vue.js實(shí)例todoList項(xiàng)目

    vue.js實(shí)例todoList項(xiàng)目

    本篇文章主要介紹了vue.js實(shí)例todoList項(xiàng)目,小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過來(lái)看看吧
    2017-07-07
  • vue清空f(shuō)orm對(duì)象的方法

    vue清空f(shuō)orm對(duì)象的方法

    這篇文章主要介紹了vue清空f(shuō)orm對(duì)象的方法,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
    2022-09-09
  • Vue全局變量的定義及使用方法

    Vue全局變量的定義及使用方法

    這篇文章主要給大家介紹了關(guān)于Vue全局變量的定義及使用的相關(guān)資料,定義完全局變量后,我們可以在程序中的任何地方使用它們,文中通過代碼介紹的非常詳細(xì),需要的朋友可以參考下
    2023-09-09
  • vue基于elementUI表格狀態(tài)判斷展示方式

    vue基于elementUI表格狀態(tài)判斷展示方式

    這篇文章主要介紹了vue基于elementUI表格狀態(tài)判斷展示方式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
    2023-10-10
  • 解決vue-cli webpack打包后加載資源的路徑問題

    解決vue-cli webpack打包后加載資源的路徑問題

    今天小編就為大家分享一篇解決vue-cli webpack打包后加載資源的路徑問題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過來(lái)看看吧
    2018-09-09
  • Vue3狀態(tài)管理之Pinia的入門使用教程

    Vue3狀態(tài)管理之Pinia的入門使用教程

    Pinia是Vue.js的輕量級(jí)狀態(tài)管理庫(kù),比起vue3中的Vuex狀態(tài)管理,pinia更輕量,更容易使用,下面這篇文章主要給大家介紹了關(guān)于Vue3狀態(tài)管理之Pinia的入門使用教程,需要的朋友可以參考下
    2022-04-04
  • 解決vue-cli@3.xx安裝不成功的問題及搭建ts-vue項(xiàng)目

    解決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

最新評(píng)論