【Vue+Axios】Access to XMLHttpRequest at XXX from origin XXX has been blocked by CORS policy-Toy模板网

这篇具有很好参考价值的文章主要介绍了【Vue+Axios】Access to XMLHttpRequest at XXX from origin XXX has been blocked by CORS policy。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

问题描述

基于Vue3和SpringBoot进行前后端分离开发，实现登录功能。在测试提交表单时axios报错。

前端报错信息：

Uncaught runtime errors:

ERROR
Network Error
AxiosError: Network Error
    at XMLHttpRequest.handleError (webpack-internal:///./node_modules/axios/lib/adapters/xhr.js:155:14

浏览器控制台报错：

Access to XMLHttpRequest at 'http://localhost:8088/api/admin/login' from origin 'http://localhost:8080' 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.

原因分析

这个错误是由于浏览器的跨域安全策略导致的。浏览器限制了跨域请求，只有在服务端设置了响应头 Access-Control-Allow-Origin 时，才允许跨域请求。

解决方案

修改前端配置

修改 vue.config.js

const { defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({
  transpileDependencies: true,
  devServer: {
    proxy: {
      '/api': {
        target: 'http://localhost:8088',
        changeOrigin: true,
        pathRewrite: {
          '/api': ''
        }
      }
    }
  }
})

其中 http://localhost:8088 为后端服务器地址。
通过代理请求转发到后端服务器，从而避免了跨域问题。

在 src/main.js 中添加：

axios.defaults.baseURL = '/api'

让 axios 的请求默认发送到代理服务器上，这样在开发过程中就不需要手动修改请求地址。

注意： 修改完成后需要重新启动vue-cli-service serve，否则会报404。文章来源地址https://www.toymoban.com/news/detail-753753.html

到了这里，关于【Vue+Axios】Access to XMLHttpRequest at XXX from origin XXX has been blocked by CORS policy的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！