vue 跨域的问题?

Question

学习vue3, 配置跨域一直不成功。
一、系统环境 windows10 vue3 vue-cli版本vue/cli 4.5.13
vue.config.js 文件全部内容

const { defineConfig } = require("@vue/cli-service");
module.exports = defineConfig({
  lintOnSave: false,
  transpileDependencies: true,
  devServer: {
    // 跨域设置
    proxy: {
      "/devapi": {
        target: "http://xxx.com/vue_admin_api",
        changeOrigin: true,
        ws: true,
        pathRewrite: {
          // 路径重写，
          "^/devapi": "", // 替换target中的请求地址，也就是说/api=/target，请求target这个地址的时候直接写成/api即可。
        },
      },
    },
  },
  css: {
    loaderOptions: {
      scss: {
        additionalData: `@import "~@/styles/main.scss";`,
      },
    },
  },
});

axios 封装

const BASEURL = process.env.NODE_ENV === "production" ? "" : "/devapi";
const service = axios.create({
  baseURL: BASEURL,
  timeout: 1000,
});

// 添加请求拦截器
service.interceptors.request.use(
  function (config) {
    // 在发送请求之前做些什么
    return config;
  },
  function (error) {
    // 对请求错误做些什么
    return Promise.reject(error);
  }
);

// 添加响应拦截器
service.interceptors.response.use(
  function (response) {
    // 2xx 范围内的状态码都会触发该函数。
    // 对响应数据做点什么
    return response;
  },
  function (error) {
    // 超出 2xx 范围的状态码都会触发该函数。
    // 对响应错误做点什么
    return Promise.reject(error);
  }
);

export default service;

api/login.js

export function GetSms(){
   service.request({
    method:"post",
    url:"/getSms",
    data:{}
   }) 
}

浏览器报错信息。

一直不知道问题出在哪里，各位大神帮忙看一下，我哪里没写对?

Answer 1

target是目标主机的地址。
pathRewrite是重写规则
pathRewrite: {

'^/api': '重写的地址'

}

Answer 2

"/devapi": {
        target: "http://xxx.com",
        changeOrigin: true,
        pathRewrite: {
          // 路径重写，
          "^/devapi": "/vue_admin_api", 
        },
      },

这样试试