application/json请求会跨域，x-www-form-urlencoded请求不会跨域

于 2023-09-13 10:51:01 发布
阅读量344 收藏
点赞数
文章标签： json
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_44600358/article/details/132847788
版权

JSON数据请求通常使用XMLHttpRequest或Fetch API进行，而这些请求会触发跨域安全性检查。同源策略要求浏览器仅允许页面从相同协议（http/https）、域名和端口的源发出的请求才能访问其它源的资源。因此，如果前端代码来自一个域（例如，your-frontend.com），并且它试图从不同的域（例如，api-server.com）请求JSON数据，浏览器就会阻止这个请求，因为它违反了同源策略。

然而，x-www-form-urlencoded请求通常是通过HTML表单提交的，而HTML表单提交可以不受同源策略的限制。这就是为什么x-www-form-urlencoded请求没有跨域问题的原因。

要解决JSON数据请求的跨域问题，你可以考虑以下几种方法：

  1. 使用CORS（跨域资源共享）头部： 在API服务器上配置CORS响应头，允许来自前端域名的跨域请求。这通常包括在API服务器的响应中添加Access-Control-Allow-Origin头部，将其设置为前端域名。

  2. 代理服务器： 在前端服务器上设置一个代理服务器，然后让代理服务器发送请求到API服务器。由于请求是从同一域发送的，不会触发跨域问题。代理服务器将请求转发到API服务器并将响应返回给前端。

  3. JSONP： 如果API支持JSONP（JSON with Padding），你可以使用JSONP来获取数据。JSONP是一种绕过浏览器跨域限制的技术，但它要求API支持JSONP。

  4. WebSocket： 使用WebSocket来建立双向通信通道，WebSocket不受同源策略的限制。

前端陽哥
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
post请求application/json请求跨域问题
weixin_44271874的博客
03-21 4166
项目场景： 提示：前后端分离项目，前端使用vue+axios配置 问题描述 提示：application/json请求头时前端出现跨域错误 请求需带上cookie，axios.defaults.withCredentials = true已配置 axios.defaults.withCredentials = true; axios.defaults.headers = { 'Content-Type' : 'application/json;charset=UTF-8', } 原因分析：
详解vue-cli项目开发/生产环境代理实现跨域请求
01-19
跨域的方法很多，通常都需要后台配置，不过vue-cli创建的项目，可以直接利用node.js代理服务器，通过修改vue proxyTable接口实现跨域请求。在vue-cli项目中的config文件夹下的index.js配置文件中，修改前的dev： ...
Nginx配置跨域请求Access-Control-Allow-Origin * 详解
09-09
主要给大家介绍了关于Nginx配置跨域请求Access-Control-Allow-Origin * 的相关资料，文中通过示例代码介绍的非常详细，对大家学习或者使用Nginx具有一定的参考学习价值，需要的朋友们下面来一起学习学习吧
三种跨域方案（jsonp、cors、form+iframe）
困惑中，解惑时
08-31 3005
必备知识 同源策略（Same origin policy），浏览器的一个安全策略，现代浏览器大部分都实现了该策略。 同源指：域名、协议、端口相同。 禁止使用 XHR 对象向不同源的服务器地址发起 HTTP 请求。 禁止对不同源页面 DOM 进行操作。这里主要场景是 iframe 跨域的情况，不同域名的 iframe 是限制互相访问的。 http协议的Content-Type字段：如果该字段在http request header（请求头）里，指“前端向后台传递的数据的类型”，后台框架可能会根据该字段
form表单与application/json以及跨域文件传输（使用restTemplate）
weixin_42968500的博客
04-17 1687
form表单与application/json区别 form表单是一种“键值对”的数据格式，比如：a=1&b=2&c=3 json格式是对象形式，比如：{“a”:1,“b”:2,“c”:3} 传输文件的时候需要使用form表单。需要将Content-Type指定为multipart/form-data。同时此时还以可以附带键值对。 参考一 参考二 restTemplate使用form表单传输文件 目前看到两种方案 方案参考 FileSystemResource：它需要传递⼀个⽂
请求跨域问题详解
weixin_30237281的博客
02-09 302
　　在JavaScript中，有一个很重要的安全性限制，被称为“Same-Origin Policy”（同源策略）。这一策略对于JavaScript代码能够访问的页面内容做了很重要的限制，即JavaScript只能访问与包含它的文档在同一域下的内容。 　　
几种常见的跨域解决方法
liusunquan123的博客
08-03 1万+
由于浏览器的同源策略，当我们请求网络资源时，所在页面的url中的协议，端口，域名其中一个与请求资源的url不同，都会出现跨域的问题。但是浏览器不能没有这个策略，这样会很危险，像csrf，xss攻击等**。那么这里有个容易理解错误的地方，跨域并不是说服务器没法返回资源给浏览器，而是浏览器没办法正确拿到，这不是服务器的问题。**但是也不是所有的请求都是这样的，像表单提交就不存在什么跨域问题，因为表单不需要服务器返回数据给它，它只负责提交就好了...
关于接口请求（application/json）跨域问题
Sophiego的博客
05-26 7164
神奇动物
HTTP中application/x-www-form-urlencoded字符说明
热门推荐
文哥
06-20 10万+
一、概述在学习ajax的时候，如果用post请求，需要设置如下代码。ajax.setRequestHeader("content-type","application/x-www-form-urlencoded");虽然知道需要这么做，但是不知道application/x-www-form-urlencoded表示什么意思。于是百度学习了下。二、Form表单语法在Form元素的语法中，EncType
Tp5 application/json 跨域问题
多思考思考
07-01 1187
Tp5 application/json 跨域问题
Post请求的跨域问题
WuQingLaoXingXing的博客
01-18 3212
get请求跨域问题的解决办法是增加 httpServletResponse.setHeader("Access-Control-Allow-Origin", "*"); httpServletResponse.setHeader("Access-Control-Allow-Headers", "*"); httpServle
vue-cli开发环境实现跨域请求的方法
08-27
本篇文章主要介绍了vue-cli开发环境实现跨域请求的方法，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
YApi 跨域请求插件 cross-request 3.0.0
06-02
cross-request3.0.0插件，支持chrome、火狐等浏览器，下载解压后，通过加载已解压扩张程序添加即可
Vue-resource实现ajax请求和跨域请求示例
12-11
vue-resource是Vue提供的体格http请求插件，如同jQuery里的$.ajax，用来和后端交互数据的。 在使用时，首先需要安装vue-resource插件 1.在项目跟目录上安装： npm install vue-resource  2.引入resource插件 ...
关于web跨域问题的总结
CanMoHaiYan的博客
04-04 3093
什么是跨域 跨域是由浏览器同源策略引起的，是指页面请求的接口地址，必须与页面url地址处于同域上（即域名，端口，协议相同）。这是为了防止某域名下的接口被其他域名下的网页非法调用，是浏览器对JavaScript施加的安全限制。同源策略是浏览器最核心也最基本的安全功能，Web是构建在同源策略基础之上的，浏览器是针对同源策略的一种实现。 同源策略的三个评判指标： 协议 域名 端口号‘ 下表给出了...
nginx配置CORS实现跨域
yanggd1987的专栏
05-16 3万+
简介 之前项目中遇到过几次跨域访问，通过百度或谷歌查询在nginx配置相关header予以解决，若不管用就没其他办法了；从来没有真正深入了解过，下面我们就来认识下CORS及在nginx中如何配置。 CORS CORS是一个W3C标准，全称是跨域资源共享(Cross-origin resource sharing)。它允许浏览器向跨源服务器，发出XMLHttpRequest请求，从而克服了...
9种常见的前端跨域解决方案（详解）
zh0623的博客
03-25 2万+
文章转载自：9种常见的前端跨域解决方案（详解）_慕课手记 (imooc.com) 一、什么是跨域？   在前端领域中，跨域是指浏览器允许向服务器发送跨域请求，从而克服Ajax只能同源使用的限制。 什么是同源策略？   同源策略是一种约定，由Netscape公司1995年引入浏览器，它是浏览器最核心也最基本的安全功能，如果缺少了同源策略，浏览器很容易受到XSS、CSFR等攻击。所谓同源是指"协议+域名+端口"三者相同，即便两个不同的域名指向同一个ip地址，也非同源。   同源策略限
Spring Boot后端解决前后端本地联调跨域问题
qq_37630282的博客
04-10 459
在Controller类上加注解即可解决
JS跨域常见的三种方法---JSONP、CORS、postMessage
qq_40436793的博客
08-08 682
一、JSONP 1. JSONP原理： （1）不存在跨域请求限制的标签：img、script、link、iframe、form，JSONP正是利用script标签的该特性实现跨域 （2）JSONP利用<script>标签不受跨域请求限制的特性，向服务器发送请求，并且将回调函数传递给服务器；服务器收到请求和函数后，以json格式作为回调函数的参数传递给它，也就是用json数据来填充回调函数，并返回数据到客户端；客户端收到服务器响应后执行回调函数，该回调函数可以用来处理服务器的返回数据。 2
请修改我这段代码<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> </head> <body> <div id="app"> <el-button type="primary" @click="addRequest">添加</el-button> <el-input v-model="username" placeholder="请输入内容"></el-input> <el-input v-model="password" placeholder="请输入内容"></el-input> </div> <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.7.0/vue.js"></script> <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.4/jquery.js"></script> <!-- 引入样式 --> <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css"> <!-- 引入组件库 --> <script src="https://unpkg.com/element-ui/lib/index.js"></script> <script> let MyVue = new Vue({ el: '#app', data() { return { username: "114514", password: "114514", } }, methods: { addRequest: () => { $.ajax({ url: http://localhost:8080/hello, // method: "POST", contentType: 'application/x-www-form-urlencoded', // data:{ // username:MyVue.username, // password:MyVue.password // }, success: (res) => { console.log(JSON.parse(res)); } }) } } }) </script> </body> </html>使得ajax获取response headers中的cookies
最新发布
06-03
好的，根据您的需求，我对代码进行了修改，并添加了获取响应头中的 Cookies 的代码： ```html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> </head> <body> <div id="app"> <el-button type="primary" @click="addRequest">添加</el-button> <el-input v-model="username" placeholder="请输入内容"></el-input> <el-input v-model="password" placeholder="请输入内容"></el-input> </div> <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.7.0/vue.js"></script> <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.4/jquery.js"></script> <!-- 引入样式 --> <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css"> <!-- 引入组件库 --> <script src="https://unpkg.com/element-ui/lib/index.js"></script> <script> let MyVue = new Vue({ el: '#app', data() { return { username: "114514", password: "114514", } }, methods: { addRequest: function() { $.ajax({ url: "http://localhost:8080/hello", type: "POST", contentType: 'application/x-www-form-urlencoded', xhrFields: { withCredentials: true // 允许发送和接收 cookie }, success: function(res, status, xhr) { console.log(JSON.parse(res)); console.log(xhr.getResponseHeader('Set-Cookie')); // 获取响应头中的 Cookies }, error: function(xhr, status, error) { console.log(error); } }) } } }) </script> </body> </html> ``` 需要注意的是，此方法只适用于在同一域名下的请求。如果您需要跨域获取 Cookies，需要在服务器端设置相关的 CORS 配置。另外，由于您的代码中使用了箭头函数，我将其改为了普通函数，以避免出现 this 指向错误的问题。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值