【Vue】vue.config.js 解决跨域问题

宾果的救星

已于 2023-02-16 16:01:08 修改

阅读量1.3k

点赞数

分类专栏： Vue 文章标签： javascript vue.js 前端

于 2023-02-10 03:00:00 首次发布

本文链接：https://blog.csdn.net/wuli_youhouli/article/details/128913713

版权

Vue 专栏收录该内容

13 篇文章 0 订阅

订阅专栏

vue.config.js 解决跨域问题

需求

比如请求login页面的login接口：https://www.bgdjx.com:8080/plat/login出现跨域问题。进行下方的配置后，前端显示http://localhost:8080/api/login，从而实现跨域。

原理

将域名发送给本地的服务器（启动vue项目的服务,loclahost:8080），再由本地的服务器去请求真正的服务器。

注意

配置后需要重启项目。

实现

vue.config.js 配置

module.exports = {
  publicPath: "./",
  devServer: {
    host: "0.0.0.0",
    proxy:{ 
      '/api':{
          target:'https://www.bgdjx.com:8080/plat/',
          ws:true,
          changeOrigin:true, //允许跨域
          pathRewrite:{
              '^/api':'', 
          }
      }
    }
  },
};

getData.js 接口配置

import axios from "axios";
// export const baseURL = "https://www.bgdjx.com:8080/plat/";
export const baseURL = "/api/"; 
axios.defaults.baseURL = baseURL;