vue-vue3跨域问题梳理

最新推荐文章于 2025-06-01 01:45:00 发布

Eggsy.Li

最新推荐文章于 2025-06-01 01:45:00 发布

阅读量472

点赞数

CC 4.0 BY-SA版权

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

本文链接：https://blog.csdn.net/qq_19331985/article/details/119982796

Vue 专栏收录该内容

13 篇文章

订阅专栏

本文详细阐述了在Vue项目中遇到跨域问题的常见现象，通过展示如何在vue.config.js中配置代理以及axios请求头来解决。重点在于理解Access-Control-Allow-Origin限制，并给出了相应的配置实例。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1. 跨域问题现象

Access to XMLHttpRequest at 'http://127.0.0.1:9611/login' from origin 'http://localhost:6370' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource.

如图：
在这里插入图片描述

2. 解决方式

在vue工程中找到vue.config.js,在module.exports中进行配置

module.exports = {
  // publicPath: './',
  outputDir: 'dist',
  assetsDir: 'static',
  lintOnSave: false,
  productionSourceMap: false,
  devServer: {
    port: port,
    open: false,
    hot: true,
    overlay: {
      warnings: false,
      errors: true
    }
   ,
   // 跨域地址配置，地址重写配置
    proxy: {
      '/api': {
        target: 'http://127.0.0.1:9611/',
        changeOrigin: true,
        ws: true,
        pathRewrite: {
          '^/api': ''
        }
      }
    }
  },

在配置axios的请求响应文件中配置（根据自己定义）

const service = axios.create({
  baseURL: "/api",	// 与重写地址一直
  timeout: 10000, // 超时时间
  headers: { 'Content-Type': 'application/json;charset=utf-8' }
})