踩坑！springboot对接vue axios报跨域问题

最新推荐文章于 2024-04-26 16:47:03 发布
最新推荐文章于 2024-04-26 16:47:03 发布
阅读量899 收藏
点赞数 1
分类专栏： springboot 前端 文章标签： vue.js java
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_29669265/article/details/104367946
版权

Access to XMLHttpRequest at 'localhost:8081/book/getAll' from origin 'http://localhost:8080' has been blocked by CORS policy: Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https.

vue通过axios发送ajax请求到后端 但是一直报跨域问题，已经在后端springboot中配置跨域相关配置（网上有很多），但是依然报上述错误，最后排查，是前端发送请求的时候没带http://协议头，加上以后就好了

                                                                       图一  (原错误代码)

                                                                       图二（修改后代码）

 

控制台不再报错，并成功返回数据

maybe-not
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
vue axios 解决跨域问题CORS
07-08
通过设置访问代理，解决vue axios 跨域访问问题
异域问题+Axios的AxiosError问题的解决（简单）
qq_62649563的博客
06-10 5356
首先我们出现这种问题 大脑第一反应的可以是controller类中没有加@CrossOrigin注解，或者是端口号不对，但一定不能怀疑自己（不管 你就是最棒的！） 所以，看下面。
在生产环境中使用axios发送请求不能使用localhost
m0_47878878的博客
07-31 1359
在生产环境中使用axios发送请求，url中的ip不能使用localhost或者127.0.0.1
关于axios错误提示问题
混世小妲己
08-14 3826
可以在401部分，清空用户信息，跳转登录页等问题。 error => { // 当响应异常时做一些处理 if (error && error.response) { switch (error.response.status) { case 400: error.message = '请求错误(400)'; break; case 401:error.message = '未授权，请重新登录(401)';break;
Python requests 出现UNSUPPORTED_PROTOCOL 解决方案
liyacai_20120512的博客
08-31 4639
最近要集成集团的LDAP，使用Python requests 库发送get请求至目的地址，请求是https，出现UNSUPPORTED_PROTOCOL错误 以下代码已关闭了SSL认证，host地址脱敏处理： import requests s = requests.Session() url = "https://xx.x.xx.xx:9443/commonauthservice_new/ws/OIDAuthService/userLogin?systemid=%s&userName=%s" \
axios请求“跨域”的解决方案
tomorrownan的博客
03-06 8878
背景： 困扰了好几个小时的问题。 启动项目后，页面内容如论如何都不出现，接口没有请求成功。看了一下控制台报了下面错误。 Access to XMLHttpRequest at 'xxx' from origin 'xxx' has been blocked by CORS policy: The value of the 'Access-Control-Allow-Origin' header ...
前端请求接口报axioserror
Slpyy的博客
12-09 1万+
后面我找到后端问了他一下，他说他还在查错，我当时问了他叫他看看自己是否开了代理，他后面说他开了代理至于到底是什么错误，还在查找中。。。。。。。。
解决Cross origin requests are only supported for protocol schemes的三种办法
热门推荐
chenmoupeng的博客
07-13 5万+
今天在写了一个简单的H5页面，项目结构如下图所示 然后在运行的时候突然报错 Access to script at ‘file:///Volumes/PERSON/font_end/h5xuexi/h5-learning3/vue_nocli/js/main.js’ from origin ‘null’ has been blocked by CORS policy: Cross origin requests are only supported for protocol schemes: http,
VUE axios发送跨域请求需要注意的问题
08-30
本篇文章主要介绍了VUE axios发送跨域请求需要注意的问题，在实际项目中前端使用到vue，后端使用php进行开发。前端使用axios请求请求遇到的问题，有兴趣的可以了解一下
Vue 3.x+axios跨域方案的踩坑指南
10-16
主要给大家介绍了关于Vue 3.x+axios跨域方案的踩坑指南，文中通过示例代码介绍的非常详细，对大家学习或者使用Vue 3.x具有一定的参考学习价值，需要的朋友们下面来一起学习学习吧
springboot vue 跨域问题的解决
08-26
主要介绍了springboot vue 跨域问题的解决，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
Vue axios 跨域请求无法带上cookie的解决
10-14
主要介绍了Vue axios 跨域请求无法带上cookie的解决，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
has been blocked by CORS policy问题解决方法
weixin_43947043的博客
04-11 6653
Ajax / html / js，has been blocked by CORS policy问题解决方法 问题描述 在练习js的过程中用到ajax，总是console出现报错：Access to XMLHttpRequest at ‘file:///Users/XXX/Downloads/nav/nav.json’ from origin ‘null’ has been blocked by CORS policy: Cross origin requests are only supported f
浏览器控制台报错：Cross origin requests are only supported for protocol schemes
来杯卡布奇诺的博客
05-11 9817
浏览器控制台报错：Cross origin requests are only supported for protocol schemes一、问题二、原因分析解决方法 一、问题 今天写了一个H5 的小demo，然后在浏览器中运行时就报了这个错误。 Access to script at ‘file:///D://test.js’ from origin ‘null’ has been blocked by CORS policy: Cross origin requests are only suppo
from origin ‘null‘ has been blocked by CORS policy: Cross origin requests are only supported for ...
Dawnchen1的博客
05-27 1万+
跨源资源请求问题解决方案 问题描述：当我们在vsCode中使用 open in brower插件打开html文件文件时，就会报错 xxx已被CORS策略阻止，引入的资源还会失效。 解决办法1 :Live Server插件 在vsCode的插件市场中搜索并安装Live Server插件： 安装好后，右键要打开的文件，就会出现“Open with Live Serve”选项，这样打开文件就不会报错了： 解决办法2：anywhere 在vsCode控制台或者cmd中安装npm install anywhe
使用libcurl.so上传下载文件报 Unsupported protocol 的解决方法
lzxue2008的专栏
03-19 6970
问题: 当通过libcurl.so使用sftp下上传下载文件报 Unsupported protocol 的错误. 解决方法: 遇到这种情况一般是编译出来的libcurl.so中不支持sftp 协议 我们下载 curl-7.41.0.tar.gz后一般都执行 ./configure && make && make inst...
Ajax跨域时出现Access to XMLHttpRequest at *** from origin *** has been been blocked by CORS policy
缚己
01-08 1万+
问题截图 发送 ajax 时出现如下错误： Access to XMLHttpRequest at 'localhost:3000/' from origin 'http://localhost:3000' has been blocked by CORS policy: Cross origin requests are only supported for protocol schemes: http, data, chrome-extension, edge, https, chrome-untru
from origin ‘null‘ has been blocked by CORS policy: Cross origin requests are only supported for pr
qq_51660806的博客
07-18 2745
解决办法： 右键----Open in Live Server (必须以服务器的形式打开)；在加载JS模块的时候，报错！
vue快速入门（四十六）Router的安装与使用
最新发布
不起眼小菜菜的博客
04-26 654
步骤很详细，直接上教程……
springboot和vue怎么解决跨域问题
06-01
跨域问题是由于浏览器的同源策略所导致的，为了保障网站的安全，浏览器只允许相同协议、域名、端口号的请求访问。因此在开发中，如果前端项目(Vue)和后端项目(Spring Boot)不在同一个域名下，就会出现跨域问题。 解决跨域问题有多种方法，以下是其中两种比较常用的方式： 1. 使用Spring Boot的CORS支持 Spring Boot提供了跨域资源共享(CORS)的支持。可以通过在后端代码中配置跨域访问的规则，告诉浏览器允许哪些域名访问后端接口。具体操作为在Spring Boot的配置文件中添加如下配置： ``` # 允许所有的域名都可以跨域访问本站的所有资源 # 当需要限制某个域名访问时，只需要修改 allowedOrigins 的值即可 spring: cors: allowed-origins: "*" allowed-methods: GET, POST, PUT, DELETE allowed-headers: "*" ``` 2. 使用Vue的代理 在开发环境中，可以在Vue的配置文件中添加代理来解决跨域问题。具体操作为在Vue的配置文件中添加如下配置： ``` module.exports = { devServer: { proxy: { '/api': { target: 'http://localhost:8080', // 后端接口地址 changeOrigin: true, // 是否允许跨域 pathRewrite: { '^/api': '' // 重写接口 } } } } } ``` 上述代码中，我们在Vue的配置文件中通过proxy属性配置了一个代理，将所有以/api开头的请求都转发到http://localhost:8080上，并开启了跨域支持。需要注意的是，由于后端接口的地址不一定是localhost:8080，具体地址需要根据实际情况进行修改。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值