vue 前端解決跨域問題 —代理

2021-4-16    前端達人

前言
跨域問題來源于JavaScript的同源策略,即只有 協(xié)議+主機名+端口號(如存在)相同,則允許相互訪問。也就是說JavaScript只能訪問和操作自己域下的資源,不能訪問和操作其他域下的資源,主要是安全問題。

在很多時候跨域問題我都是讓后端解決,嘿嘿。但也有需要自己解決的項目!

  1. 首先在項目的根目錄下建一個vue.config.js

  2. 如下:

  3. //改變webpack的設(shè)置
    
     const { default: Axios } = require("axios")
    
     module.exports = {
         publicPath :"./",
         devServer: {
             // 設(shè)置主機地址
             // host: 'xxx.1xx.1xx.xxx',
             // // 設(shè)置默認(rèn)端口
             // port: 8051,
             // 設(shè)置代理
             proxy: {
                 '/api': {
                     // 目標(biāo) API 地址
                     target: 'http://xxx.xxx.xxx.xxx:8051',//服務(wù)器地址
                     // 如果要代理 websockets
                     ws: true,
                     // 將主機標(biāo)頭的原點更改為目標(biāo)URL
                     changeOrigin: false
                 }
             }
        },
        chainWebpack: config => {//沒有用到scss的這里就不需要啦!
           const oneOfsMap = config.module.rule('scss').oneOfs.store
            oneOfsMap.forEach(item => {
              item
                 .use('sass-resources-loader')
                 .loader('sass-resources-loader')
                 .options({
                     // 要公用的scss的路徑
                     resources: './src/assets/base.scss'
                 })
                 .end()
               })
           }
       }



轉(zhuǎn)自:csdn 論壇 作者:可 樂 伢


藍藍設(shè)計www.bouu.cn )是一家專注而深入的界面設(shè)計公司,為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計BS界面設(shè)計 、 cs界面設(shè)計 、 ipad界面設(shè)計 、 包裝設(shè)計 、 圖標(biāo)定制 、 用戶體驗 、交互設(shè)計、 網(wǎng)站建設(shè) 、平面設(shè)計服務(wù)


分享本文至:

日歷

鏈接

個人資料

藍藍設(shè)計的小編 http://www.bouu.cn

存檔