vue使用proxy来解决跨域问题

那年，那关心

已于 2022-07-21 10:40:52 修改

阅读量797

点赞数

文章标签： vue.js 前端 javascript

于 2022-06-30 13:39:00 首次发布

本文链接：https://blog.csdn.net/weixin_46181037/article/details/125415379

版权

vue使用proxy来解决跨域问题

一个项目中，接口是同一路径但是端口号不同，不同的功能请求不同的端口号这个需求如何进行proxy来解决跨域，vue2.0

vue.config.js

const { defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({
   transpileDependencies: true,
   publicPath: './'
  devServer: {
    proxy: {
         '/api': {
          target: 'https://aaaa:8202',
          changeOrigin: true,    //允许跨域
          //重定向的作用，一般情况下接口中都含有api，如果项目接口中含有api并且target中写了api，则需要重定向替换，不写的话则不需要，根据项目需要来，我的项目中没有api，所以没写
          pathRewrite: {            
            '^/api': '',         //重定向为空字符串时表示请求的地址为:  https://aaaa:8202/abc/getAbcList
            '^/api': 'api'       //这种写法请求地址为：https://aaaa:8202/api/abc/getAbcList
         }
       },
       '/web': {
          target: 'https://aaaaa:8203',
          changeOrigin: true,
          pathRewrite: {
              '^/web': ''
          }
       },
      '/five': {
       target: 'https://aaaa:8204',
        changeOrigin: true,
        pathRewrite: {
           '^/five': ''
        }
     }
   }
  }
})

api.js

import request from '../utils/request'

// 测试接口
export function getAdminList (data) {
  return request({
    method: 'post', // 请求方式
    url: 'api/abc/getAbcList', // 接口路径
    params: data, // 数据
    headers: {
      'Content-Type': 'application/x-www-form-urlencoded'
    }
  })
}

// 测试接口
export function addNewAdmin (data) {
  return request({
    method: 'post', // 请求方式
    url: 'web/abc/getAbcList', // 接口路径
    data: data
  })
}

// 测试接口
export function addNewAdmin (data) {
  return request({
    method: 'post', // 请求方式
    url: 'five/abc/getAbcList', // 接口路径
    data: data
  })
}

request.js的封装可以参考这个：vue封装axios