跨域：vue中发的axios post请求，参数带冒号：且报错blocked by CORS policy

最新推荐文章于 2024-02-29 17:45:21 发布
最新推荐文章于 2024-02-29 17:45:21 发布
阅读量1.4k 收藏 3
点赞数 1
分类专栏： HTTP/AXIOS JS 文章标签： vue json post
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_42371145/article/details/104814391
版权

背景：vue框架
一 post请求报错：
在这里插入图片描述
status：failed
在这里插入图片描述

在这里插入图片描述
方法1：
安装qs
npm install qs

api：
config.headers['Content-Type'] = 'application/json'

zujian.vue:
import qs from 'qs'
let param={
   
   postCode:this.$route.query.pc,
 }
 requestReplypost(qs.parse(param)).then(response=>{
   
   this.postList.push(response)
   this.contp=''
 })

方法2：

api.
最低0.47元/天 解锁文章
檀小泡泡
关注
  • 1
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
出现 has been blocked by CORS policy: No ‘Access-Control-Allow-Origin‘ header is present on the 解决方法
码农研究僧的博客
06-03 2216
Access to XMLHttpRequest at 'http://127.0.0.1:5000/api/data' from origin 'http://10.197.0.79:8080' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.
在vue中使用axios提交post请求出现大括号和冒号的坑
huangguangyourena的博客
06-22 9305
先把出现问题的地方贴上来，这是我在vue项目中的代码，在这个注册功能中，会向后台发送数据，这里不能直接将postData传到后台，否则会报错，所以这个地方使用了JSON.stringify()对数据进行序列化。后台接收到数据后我尝试打印出来，结果让我非常难受。打印的结果如下所示，，将接收到的数据打印出来后，发现居然在外面多了一个大括号，这都什么玩意。而且前端控制台接收到的数据是这样的数据的后面多了...
前端使用JSON.stringify，传递到后台多了个冒号
新前端小白的博客
09-20 5610
场景：前端使用JSON.stringify传递到后台之后报错了，然后后端的说是多了个冒号，在控制台打印出来发现没有冒号。在requestPayload中发现多了个冒号 解决：contentType的默认是application/x-www-form-urlencoded，将contentType改为application/json即可 'contentType': 'application/js...
vue $http.post 传json格式,参数有冒号怎么解决
最新发布
qq_35145095的博客
02-29 681
在 Vue 中使用 $http.post 方法传递 JSON 格式的参数时，如果参数中包含冒号，可使用 ES6 的计算属性语法将参数作为对象传递。这样可以确保参数正确地以 JSON 格式发送到服务器。请根据实际需求修改示例代码中的 URL 和其他相关配置。对象包含一个带有冒号的键名。对象作为参数对象传递给。，我们使用计算属性语法。
axios中post请求上传的参数 是 form data，后面跟了一个冒号
程序猿小白的博客
06-03 1932
前言：最近在项目中调接口时，发现请求上传的参数form data后面跟了一个冒号 解决方法：
axios.post后台接收不到数据以及出现冒号的坑....
Daisy_1的博客
08-02 2425
一、后台接收数据格式formData，但查看network数据格式变为Request Rayload，导致后台接收不到数据 解决方法： 1.设置Content-Type 的值为 application/x-www-form-urlencoded ①可以将其设置为全局header，在main.js中： axios.defaults.headers.common['Content-Type'] = ...
解决在Vue中使用axios POST请求变成OPTIONS的问题
10-14
在Vue.js应用中，当你使用axios库进行POST请求时，有时会发现浏览器实际上发送了一个OPTIONS请求，而不是预期的POST请求。这种现象通常是由于浏览器的CORS（Cross-Origin Resource Sharing，跨源资源共享）策略引起...
Vue axios 跨域请求无法带上cookie的解决
10-14
总之，解决Vue axios跨域请求无法携带cookie的问题，需要前端设置`axios.defaults.withCredentials = true`，后端设置`Access-Control-Allow-Credentials: true`，并且`Access-Control-Allow-Origin`要正确指向前端...
解决vue axios跨域 Request Method: OPTIONS问题(预检请求)
01-19
我们在vue开发中用axios进行跨域请求时有时会遇到，同一个接口请求了两次，并且第一次都是options请求，然后才是post/get请求 如下图 options请求 get请求 为什么会出现这种原因呢？ 这是因为CORS跨域分为 简单...
axios传参，post方式，参数后面多了冒号
weixin_43663775的博客
03-25 1795
增加 headers: { 'Content-Type': 'application/json' } 即可
Chrome浏览器控制台报 POST http://*** net::ERR_BLOCKED_BY_CLIENT
weixin_30537391的博客
08-22 415
开发项目广告模块时，遇到前端提交的请求后台拿不到，好像被什么拦截了，查看了过滤器，拦截器都无错误，且请求也到不了拦截器，chrome浏览器报:ERR_BLOCKED_BY_CLIENT错误 搞腾一半天 才发现是安装的广告插件，把请求当做广告拦截了，关掉广告拦截器，既能正常运行 转载于:https://www.cnblogs.com/bbeb/p/11396908.html...
Axios使用Post传String出现额外双引号或冒号、等号的解决方法
Geinu666的博客
04-13 9546
Axios解决post字符串出现额外字符
VUE axios POST 发送跨域 cros 问题
wgchen
10-18 1299
VUE axios POST 发送跨域 cros 问题
vue CORS error 跨域问题 解决方法
m0_68576237的博客
05-08 8076
要解决这个问题，需要在后端服务器上设置CORS头部，允许跨域请求。具体的方法是在后端服务器的响应头部中添加Access-Control-Allow-Origin头部，指定允许跨域请求的域名。在默认情况下，浏览器只允许在同一域名下的请求，如果请求的域名不同，就会出现CORS错误。如果你使用的是Spring Boot框架，可以在Controller类或方法上添加@CrossOrigin注解，指定允许跨域请求的域名。如果你使用的是其他后端框架，可以查阅相应的文档，了解如何设置CORS头部。
解决The value of the ‘Access-Control-Allow-Origin‘ header in the response must not be the wildcard ‘*‘
热门推荐
后端开发
05-31 1万+
1.问题描述： 前台vue项目中需要在request_header中传cookie给后台 但是控制台报错如下； Access to XMLHttpRequest at ‘http://192.168.0.230:9800/v1/user/wwwlogin’ from origin ‘http://192.168.0.230:8888’ has been blocked by CORS policy: Response to preflight request doesn’t pass access co
Http 基础详解
Dorom
07-06 518
URL:统一资源定位符。https://www.csdn.net/article/https://zhidao.baidu.com/search?ct=17&pn=0&tn=ikaslist&rn=10&fr=wwwt&word=csdn都是URL地址一个URL地址通常是由五个部分构成：·协议：一般来说，URL地址中的一个冒号之前的就是协议。 协议就是通信双...
2020/03/18 vue标签中的冒号 &错误 Invalid prop. Expected Number with value
行动力
03-18 1578
报错提示 ： Invalid prop: type check failed for prop "maxlength". Expected Number with value 20, got String with value "20". 起因：按iview示例写入代码中 修改：maxlength 改为 => :maxlength vue组件属性中 冒号是vue 的 v...
用axios 访问后台接口报错has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource
08-19
### 回答1： 这是因为你的请求涉及到跨域访问，而后台服务器没有设置允许跨域访问的响应头，导致浏览器拒绝了该请求。解决这个问题可以在后台服务器的响应头中添加`Access-Control-Allow-Origin`字段，其值为允许跨域访问的域名。例如，如果你想允许所有域名进行跨域访问，可以在响应头中添加如下字段： ``` Access-Control-Allow-Origin: * ``` 如果你想只允许特定的域名进行跨域访问，可以将`*`替换为该域名。例如： ``` Access-Control-Allow-Origin: http://example.com ``` 注意，这个字段必须出现在响应头中，并且必须在其他响应头字段之前。 ### 回答2： 这个错误提示是由于跨域资源共享(CORS)策略引起的。默认情况下，在浏览器中，JavaScript脚本只能从与加载页面的同一域名下发起HTTP请求，不能跨域。而当我们使用axios库从JavaScript代码中访问后台接口时，如果后台接口的响应中没有包含特定的跨域许可头信息（Access-Control-Allow-Origin），则会触发这个错误。 要解决这个问题，可以尝试以下方法： 1. 修改后台接口的响应头。在后台接口返回响应之前，添加一个名为"Access-Control-Allow-Origin"的头，并将其值设置为允许访问该接口的域名或"*"。例如，可以在返回的响应头中添加以下信息： ```javascript res.setHeader('Access-Control-Allow-Origin', '*'); ``` 2. 使用代理服务器。可以在前端代码中配置一个代理服务器，将axios请求转发到后台接口，并将响应返回给前端。这样，由于前端代码是在与后台接口同一域名下运行的，就不存在跨域问题了。例如，可以在项目的根目录下创建一个vue.config.js文件，并添加以下配置： ```javascript module.exports = { devServer: { proxy: { '/api': { target: 'http://example.com', // 代理的后台接口域名 changeOrigin: true } } } }; ``` 然后在前端代码中访问后台接口时，将URL修改为代理服务器的URL，例如： ```javascript axios.get('/api/some-api').then(response => { // 处理响应 }).catch(error => { // 处理错误 }); ``` 通过以上方法中的一种或两种，应该能够解决使用axios访问后台接口时的CORS错误。 ### 回答3： 出现该错误是由于浏览器的同源策略（Same-Origin Policy）导致的。同源策略要求浏览器只能访问与当前网页具有相同协议、域名和端口的资源。 当使用axios访问后台接口时，如果后台没有配置跨域请求的允许访问控制头信息（Access-Control-Allow-Origin），则会出现该错误。 为了解决这个问题，我们可以通过以下几种方法： 1. 在后台服务器的响应头中添加Access-Control-Allow-Origin的值为"*"，表示允许所有域名访问该接口。例如在Node.js中，可以通过设置响应头实现： ``` response.setHeader("Access-Control-Allow-Origin", "*"); ``` 2. 如果不允许所有域名访问该接口，可以将Access-Control-Allow-Origin的值设置为请求的域名。例如，如果前端页面运行在 http://localhost:3000 上，可以设置为： ``` response.setHeader("Access-Control-Allow-Origin", "http://localhost:3000"); ``` 3. 使用代理服务器。可以在Web服务器前面添加一个代理服务器，然后由代理服务器去请求后台接口。这样，通过代理服务器发送的请求是同域的，就不会受到同源策略的限制。 以上是几种常见的解决方案，根据具体的开发环境和需求，选择适合的方法来解决这个错误。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值