记录vue发送post请求出现跨域报错Access to XMLHttpRequest at ......

最新推荐文章于 2025-05-15 21:54:14 发布

前进的攻城狮

最新推荐文章于 2025-05-15 21:54:14 发布

阅读量1.2k

点赞数 3

CC 4.0 BY-SA版权

文章标签： javascript 前端开发语言

本文链接：https://blog.youkuaiyun.com/ZGL_Running/article/details/137258106

本文讲述了在Vue项目中遇到跨域错误的原因，介绍了如何通过配置vue.config.js的proxy选项以及使用JSONP方法来解决跨域问题，包括设置代理目标地址、更改请求源地址和在后端添加CORS头部信息的解决方案。

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

报错如图所示

Access to XMLHttpRequest at 'https://target.com/mac' from origin 'http://localhost:8080' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: Redirect is not allowed for a preflight request

开始不知道这是跨域，经过反复思考(跟度娘对线)得知，原来这个就是跨域了。

这里解释一下跨域请求：

跨域请求就是指在浏览器中，通过JavaScript代码从一个域名的页面向另一个域名的服务器发送请求。然而，由于浏览器的同源策略，默认情况下，JavaScript只能向与当前页面具有相同协议、域名和端口的服务器发送请求。在这种情况下，由于请求的目标URL与当前页面的域名不同，浏览器会阻止这个跨域请求，并报错提示跨域错误。

从度娘那查询到好几种解决方法，这里主要讲一下自己亲测用到的。

配置vue.config.js文件（没有的话就创建一个）

vue.config.js内容

module.exports = {
    devServer: {
        proxy: {
            '/api': {
                target: 'https://target.com', // 设置代理目标地址
                ws: true,
                changeOrigin: true, // 是否改变请求源地址
                pathRewrite: {
                    '^/api': '' // 将/api替换为空字符串，去掉请求路径中的/api前缀
                }
            }
        }
    }
}
//这种没有效果，没起作用，还是报错

这种没有效果，没起作用，还是报错，以为是写错了，又反复查询了很多次，还是没用。。。。

反复查询反复查询。。。。

查询到没有vue.config.js文件的，可以在index.js文件中配置，该文件路径在config目录下

还是没起作用，原来是配置错地方了，继续修改，在proxyTable中配置

可以了，成功！！！！！！！

最后再介绍一下其它几种解决跨域的方法（未亲测）

在后端接口中添加CORS头部信息：在后端接口的响应中添加"Access-Control-Allow-Origin"头部信息，允许指定的域名"http://localhost:8080"访问该接口。具体的实现方式取决于你使用的后端语言和框架，可以参考相关文档进行配置。
JSONP跨域：如果接口支持JSONP方式，可以使用Vue的jsonp插件来实现跨域请求。首先安装jsonp插件：

npm install vue-jsonp --save

然后在Vue项目中使用jsonp插件发送跨域请求：

import Vue from 'vue'
import VueJsonp from 'vue-jsonp'

Vue.use(VueJsonp)

Vue.jsonp('http://api.example.com/api', { // 发送跨域请求
  params: {
    // 请求参数
  }
}).then(response => {
  // 处理响应数据
}).catch(error => {
  // 处理错误
})