vue 前端解决跨域问题 —代理

2021-4-16 前端达人

前言
跨域问题来源于JavaScript的同源策略,即只有协议+主机名+端口号(如存在)相同,则允许相互访问。也就是说JavaScript只能访问和操作自己域下的资源,不能访问和操作其他域下的资源，主要是安全问题。

在很多时候跨域问题我都是让后端解决，嘿嘿。但也有需要自己解决的项目！

首先在项目的根目录下建一个vue.config.js
如下：

//改变webpack的设置

 const { default: Axios } = require("axios")

 module.exports = {
     publicPath :"./",
     devServer: {
         // 设置主机地址
         // host: 'xxx.1xx.1xx.xxx',
         // // 设置默认端口
         // port: 8051,
         // 设置代理
         proxy: {
             '/api': {
                 // 目标 API 地址
                 target: 'http://xxx.xxx.xxx.xxx:8051',//服务器地址
                 // 如果要代理 websockets
                 ws: true,
                 // 将主机标头的原点更改为目标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()
           })
       }
   }

转自：csdn 论坛作者：可乐伢

蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计、 cs界面设计、 ipad界面设计、包装设计、图标定制、用户体验、交互设计、网站建设、平面设计服务

分享本文至：

« 设计原则的实践与深化 IDEA2021 tomcat10 servlet 较新版本踩坑记录 »

vue 前端解决跨域问题 —代理

分类

日历

链接

个人资料

存档