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

2021-4-16    前端达人

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

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

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

  2. 如下:

  3. //改变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界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 平面设计服


分享本文至:

日历

链接

blogger

蓝蓝 http://www.lanlanwork.com

存档