首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

为什么有些跨域JSON请求会失败,但有些则不然?

这个问题涉及到了跨域资源共享(CORS)的概念,它是一种浏览器的安全机制,用于防止网页中的JavaScript代码对不同域名的资源进行访问。当一个请求涉及到跨域访问时,浏览器会自动发送一个预检请求(preflight request),该请求会询问服务器是否允许跨域访问。如果服务器允许跨域访问,则浏览器会继续发送实际的请求。如果服务器不允许跨域访问,则浏览器会阻止该请求。

有些JSON请求会失败,而有些则不然,这取决于服务器的响应头信息。具体来说,服务器需要在响应头中设置Access-Control-Allow-Origin字段,该字段指定允许跨域访问的域名。如果该字段的值为*,则表示允许任何域名进行跨域访问;如果该字段的值为特定的域名,则表示只允许该域名进行跨域访问。

如果服务器没有正确设置Access-Control-Allow-Origin字段,则浏览器会阻止跨域请求,导致JSON请求失败。如果服务器正确设置了该字段,则浏览器会允许跨域请求,JSON请求才能成功。

推荐的腾讯云相关产品:腾讯云API网关、腾讯云负载均衡、腾讯云CDN、腾讯云SSL证书。

产品介绍链接地址:

  1. 腾讯云API网关:https://cloud.tencent.com/product/apigateway
  2. 腾讯云负载均衡:https://cloud.tencent.com/product/clb
  3. 腾讯云CDN:https://cloud.tencent.com/product/cdn
  4. 腾讯云SSL证书:https://cloud.tencent.com/product/ssl
页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

怎样与 CORS 和 cookie 打交道

,此时就会放宽 CORS 的限制,允许存取资源。...有些跨来源请求不会发生 preflight,而有些请求则会,MDN上写的清清楚楚: 必须是 GET,HEAD,POST 中的一种方法 除了 user-agent 自动设置的 header 和特定的...Preflight 所谓的 preflight 就是请求先用 HTTP 的 OPTION 方法去另外一个敲门,确认没问题后才会送出真正的请求。一旦触发了这个条件,事情就会变得麻烦得多。...附带身份验证的请求 cookie 并不能传递,也就是说不同 origin 来的 cookie 没办法互相传递及存取,不然就天下大乱了。...不过如果你在 a 送出了 b 请求,且 b 回传了 cookie 的信息,那么在 a 以 b 的形式储存一份cookie,如果没有设定 withCredentials 或是 credentials

1.3K30
  • 模拟请求|协议复现方案

    可能有些问,为啥要后端服务,不直接在前端向开门 app 的服务器发送请求,然后将响应直接渲染到前端上。...限制只存在于浏览器端,在其他环境下是不存在,请求都是能够发送出去,并且是可以接收到的。所以说为什么不在前端直接向原应用程序的服务器发送请求,罪魁祸首也就是同源策略。...所以也就为什么很多 exe 程序(尤其是易语言)带有 .vmp.exe 也就是 vmp 加壳,让程序很难被分析与破解。并且我就可以开启系统抓包,就可以看到应用程序模拟发送的请求数据包是什么。...一种就是通过浏览器插件来允许任何请求,或者本地开启 http 响应替换,将允许的协议头加到响应中。这些手段都需要使用者有一定的开发能力,对于普通用户而言就无能为力。...说白了请求 http://example.com/api/user/me 就是在请求 http://target.com/api,同时还不会触发,反向代理也是解决的常用方法之一。

    76510

    谷歌浏览器获取本地json文件问题及JSONP的应用

    最近需要读取本地json文件,找到了原生js方式和ajax方式,都会报的问题。于是研究了下什么是为什么,以及JSONP解决方案的运用。 一、我是怎么遇到问题的?...为什么浏览器会报的错? 这是因为浏览器有一个安全机制,叫做 同源策略(CROS),不同的客户端脚本在无明确授权的情况下,是不能读取对方资源的。...它保证了一个的脚本只能读写本内的资源,而无法访问其他的资源。 所以,可以说就是不同源。 需要注意,并不是所有浏览器都用同源策略,比如火狐浏览器,就允许。...jsonp/test.json 而实际上,让我们仔细看看谷歌浏览器的报错内容,就可以发现,请求仅支持协议方案。...参考文章: 谷歌通过ajax获取本地JSON文件,为什么提示? 杂糅了一大堆的资料,后面的例子反而不是和清晰了。

    4.4K20

    CSRF 原理与防御案例分析

    本文作者:Yunen(信安之路新晋作者) CSRF,也称 XSRF,即请求伪造攻击,与 XSS 相似,与 XSS 相比更难防范,是一种广泛存在于网站中的安全漏洞,经常与 XSS 一起配合攻击。...1) HTML 标签 我们知道,根据同源策略的规定,请求是不允许带上 Cookie 等信息的,可是出于种种考虑最终没有进行完全禁止,即存在某些合法的请求。...通常由 HTML 标签src、lowsrc等属性产生的请求是被浏览器认为是合法的请求,并且此时并不需要 javascript 的参与。 ?...json 数据可以进行方便的传输。...以下相关例子均为 Referer 绕过: WooYun-2015-164067 WooYun-2015-165578 WooYun-2016-166608 WooYun-2016-167674 有些网站由于历史原因允许空

    2.3K30

    新手对的误解以及Credentials对配置的坑

    在学习过程中,似乎很简单,无非就是“当一个请求url的协议、域名、端口三者之间任意一个与当前页面url不同即为”; 无非就是“后端加一下的相关响应头即可”。...,还有个哥们一直失败。...难道配置在前端还做了什么拦截吗? 经过排查,那位失败的兄弟发现将axios的所有config删除后就能正常访问了。...在nginx对OPTIONS请求进行额外处理: 在过程中(PUT、DELETE、发送JSON数据请求),先发送一次预检OPTIONS请求,然而不知道为什么OPTIONS没有通过上图所示红框的上半部分...忽略掉OPTIONS请求: 大佬参考的文章 阮一峰详解,强推

    1K30

    前端-不要再问的问题了

    到了真正工作,开发环境有webpack-dev-server搞定,上线了服务端的大佬们也配好,配了什么我不管,反正不会就是了。...要掌握,首先要知道为什么会有这个问题出现 确实,我们这种搬砖工人就是为了混口饭吃嘛,好好的调个接口告诉我了,这种阻碍我们轻松搬砖的事情真恶心!为什么?是谁在搞事情?...这么官方的东西真难懂,没关系,至少你知道了,因为浏览器的同源策略导致了,就是浏览器在搞事情。 所以,浏览器为什么要搞事情?就是不想给好日子我们过?...正确的打开方式 经过对同源策略的了解,我们应该要消除对浏览器的误解,同源策略是浏览器做的一件好事,是用来防御来自邪门歪道的攻击,总不能为了不让坏人进门而把全部人都拒之门外吧。...没错,我们这种正人君子只要打开方式正确,就应该可以。 下面将一个个演示正确打开方式,但在此之前,有些准备工作要做。

    5.9K10

    关于-学习笔记

    /2012/03/24/2403945.html 讲的比较细:http://www.cnblogs.com/kenshinobiy/p/6265197.html 笔记     有些东西不要太较真,因为没啥用...2.jsonp方式,就是利用script的src来变相发送get请求,在链接里会发送一个函数名,而json数据作为 函数的参数被回调函数传递过来再解析应用。...以后可以是任何其他     } });     4.jsonp缺点:     ·没有关于调用错误的处理函数,失败以浏览器默认方式处理     ·只支持get请求。...主流的解决方案     9.CORS的核心思想是通过一系列新增的HTTP头信息来实现服务器和客户端之间的通信。...大部分情况,大家都喜欢直接写成*返回,*表示任意外域资源都可以访问,这样安全性不高。)     12.如果没有头部,或头部信息源不匹配,就会返回错误驳回请求

    69760

    ThingJS数据对接方法介绍——Ajax

    为什么Ajax 通过XHR 实现Ajax 通信的一个主要限制,来源于安全策略。默认情况下,XHR 对象只能访问与包含它的页面位于同一个域中的资源。这种安全策略可以预防某些恶意行为。...但是,实现合理的请求对开发某些浏览器应用程序也是至关重要的。它允许浏览器向的服务器,发出 XMLHttpRequest 请求,从而解决了 Ajax 请求数据的问题。...CORS 背后的基本思想,就是使用自定义的HTTP 头部让浏览器与服务器进行沟通,从而决定请求或响应是应该成功,还是应该失败。...正常情况下,浏览器处理请求。注意,请求和响应都不包含cookie 信息。 CORS通信过程 对于前端而言,整个 CORS 通信过程,由浏览器自动完成。...默认是:"application/x-www-form-urlencoded" 此方式无将复杂的 JSON 组织成键值对形式 //因此设置 contentType 为'application/json

    1.7K20

    30 分钟 HTTP 查漏补缺之 Vary

    如果缺少服务端开发经验话,对于这个概念可能感到陌生,其实我们在工作中几乎都会遇到它,比如在调用接口时,经常会用到 Accept: application/json 这个头部,有时可能会用到 Accept...类似,同样因为内容的格式因用户的主观意识而不同,还有诸多其他因素制约内容协商机制,所以最终失败了。...Vary 与 缓存命中率 Vary 虽然可以防止缓存错乱,并不代表可以滥用,盲目的使用适得其反,比如之前提及的 Vary: *,这样等价于将每个请求视为唯一,并且不缓存其响应资源,除非有意为之,不然没有人牺牲缓存带来的性能提升...Vary 与 CORS 对于的有情况,Vary 也包含一些内容。...为什么要包含这个头部,因为请求头中的 Origin 头部代表了该请求来源的具体域名信息,那么对于不同域名网站所发起的请求,会使用仅属于它本身的缓存。

    99620

    关于

    我也在网上查看了一些关于出现的原因及解决的方法,并记录下来。 #为什么会有 一句话的理解就是:服务端和请求端的地址不一样。...其实这个也不能怪浏览器,假设谁都可以随随便便向你发送请求,那样有很大的安全隐患。 根据浏览器的同源策略, 只有当协议,域名,端口相同的时候才算是同源, 反之均视为是一个请求....也就是说我刚刚的Vue端口是8081,服务端端口是8080,端口不一样,因为同源策略的存在 ,所有我的请求失败。 一个问题,当找到了原因,这个问题就解决了一半了。...#怎么解决 下面就先介绍三种全域的方法: #JSONP 应该是最常见解决的方法了, 他为什么能解决呢,是因为Web 页面上调用 js 文件不受浏览器同源策略的影响,所以通过 Script...浏览器一旦发现 ajax 请求源,就会自动添加一些附加的头信息,有时还会多出一次附加的请求用户不会有感觉。 因此,实现 CORS 通信的关键是服务器。

    60810

    CORS资源共享及解决方案

    为什么会出现的问题? Javascript的访问是根据同源策略来的,同源策略即(同端口,同协议,同域名)。现在主流的开发方式都是前后端分离,所以很容易就出现的问题。...cors即资源共享,解决了前后端分离的资源共享问题。...目前主流的浏览器都支持cors CORS出现场景 简答请求和非简单请求 有些情况并不会触发cors的预检请求(即Options请求)我们将这种称为简单请求触发options请求的为非简单请求 使用下列方法之一...请求头中默认加上了origin,已经触发了 这个时候需要服务端允许你获取资源 ? 重启一下express服务 ? ?...现在淘宝有些还是利用jsonp解决的

    85220

    JSON与JSONP的区别

    第二个是的需求如何解决?这两个问题目前都有不同的解决方案,比如数据可以用自定义字符串或者用XML来描述,可以通过服务器端代理来解决。...到目前为止最被推崇或者说首选的方案还是用JSON来传数据,靠JSONP来。而这就是本文将要讲述的内容。...JSON和JSONP虽然只有一个字母的差别,其实他们根本不是一回事儿:JSON是一种数据交换格式,而JSONP是一种依靠开发人员的聪明才智创造出的一种非官方数据交互协议。...1、一个众所周知的问题,Ajax直接请求普通文件存在无权限访问的问题,甭管你是静态页面、动态网页、web服务、WCF,只要是请求,一律不准; 2、不过我们又发现,Web页面上调用js文件时则不受是否的影响...,jQuery自动为你处理数据 success: function(json){ alert('您查询到航班信息:票价: ' + json.price

    1.7K20

    Javascript后台设置拦截

    子域名之间互相访问需要 结论放在开头: 服务端必须设置允许 客户端带cookie需要设置withCredentials 无论服务端是否允许,该request都会完整执行 options预请求需要设置返回空...但由于保护,请求失败: No 'Access-Control-Allow-Origin' header is present on the requested resource....第二点,简单域中,浏览器的请求直接发送给服务器,服务器返回是否支持(即是否header加origin), 那么简单究竟是请求了服务端几次?...(待验证) 验证:即使服务端没有设置允许,当客户端请求过来时,服务端仍旧完整执行了请求并返回,只是客户端没有接收。 服务端需要做点工作 针对上述两种。...其他同理,总之,非简单多发一次options请求来确认是否支持,这时候服务端一定要返回支持,并且直接返回即可。

    1K80

    浅入ABP(2):添加基础集成服务

    目录 浅入ABP(2):添加基础集成服务 定义一个特性标记 全局统一消息格式 Http 状态码 常用的请求结果 响应模型 全局异常拦截器 先说明一下 ApiResponseModel 是抽象类 请求...配置 API 服务 统一 API 模型验证消息 创建前 创建方式 创建后 补充:为什么需要统一格式 上一篇,我们已经搭建起了一个基本的程序结构,下面我们来添加一些必要的服务,例如异常拦截器、等。...请求 这里我们将配置 Web 全局允许请求。...但是有些验证直接报异常而不会流转到上面的拦截器中,有些模型验证特性用错对象的话,他会报错异常的。...view=netcore-3.1 本系列第二篇到此,接下来第三篇继续添加一些基础服务。 补充:为什么需要统一格式 首先,你看一下这样的代码: ?

    1.8K30

    全面分析前端的网络请求方式

    如何选择合适的方式 带着以上这些问题、关注点我们对几种网络请求进行一次全面的分析。...withCredentials ajax请求默认携带同源请求的 cookie,而请求则不会携带 cookie,设置 xhr的 withCredentials的属性为 true将允许携带 cookie...当网络故障时或请求被阻止时,才会标记为 reject,如、 url不存在,网络异常等触发 onerror。 所以使用fetch当接收到异常状态码都是进入then而不是catch。...十二、总结 谈到网络请求,就不得不提。 浏览器的同源策略限制了从同一个源加载的文档或脚本如何与来自另一个源的资源进行交互。这是一个用于隔离潜在恶意文件的重要安全机制。...条件:协议,域名,端口,有一个不同就算

    1.8K40

    你真的会使用XMLHttpRequest吗?

    原因1:W3C的 xhr 标准中做了限制,规定客户端无法获取 response 中的 Set-Cookie、Set-Cookie2这2个字段,无论是同还是请求; 原因2:W3C 的 cors...标准对于请求也做了限制,规定对于请求,客户端允许获取的response header字段只限于“simple response header”和“Access-Control-Expose-Headers...以下3种情况下值都为null:请求未完成、请求失败请求成功返回数据无法被正确解析时 如何追踪ajax请求的当前状态 在发一个ajax请求后,如果想追踪请求当前处于哪种状态,该怎么做呢?...之前说过页面中应该尽量避免使用sync同步请求为什么呢? 因为我们无法设置请求超时时间(xhr.timeout为0,即不限时)。...大家是否遇到过这样的场景:在发送请求时,cookie并没有自动加在request header中。

    1.6K30

    说说JSON和JSONP( 含jquery例子)

    第二个是的需求如何解决?这两个问题目前都有不同的解决方案,比如数据可以用自定义字符串或者用XML来描述,可以通过服务器端代理来解决。...到目前为止最被推崇或者说首选的方案还是用JSON来传数据,靠JSONP来。而这就是本文将要讲述的内容。...JSON和JSONP虽然只有一个字母的差别,其实他们根本不是一回事儿:JSON是一种数据交换格式,而JSONP是一种依靠开发人员的聪明才智创造出的一种非官方数据交互协议。...1、一个众所周知的问题,Ajax直接请求普通文件存在无权限访问的问题,甭管你是静态页面、动态网页、web服务、WCF,只要是请求,一律不准; 2、不过我们又发现,Web页面上调用js文件时则不受是否的影响...,jQuery自动为你处理数据 success: function(json){ alert('您查询到航班信息:票价: ' + json.price

    1.5K50

    从壹开始前后端分离【 .NET Core2.2 +Vue2 】框架之十二 || 三种方式比较

    零、今天完成左下角的深紫色部分 一、为什么会出现的问题 问题由来已久,主要是来源于浏览器的”同源策略”。 何为同源?只有当协议、端口、和域名都相同的页面,两个页面具有相同的源。...“按钮,发现已经有数据了,证明Jsonp已经成功,你可以换成自己的域名试一试,但是Cors的还不行 三、三种方式 之添加请求头实现 这里我没有写到代码里,是在一般处理程序里之前用到的 1...,再进行 Http 请求,否则会提示失败。...当然如果懒得下载,可以看我的在线效果:http://123.206.33.109:8081/corspost.html ---- 注意:这里要说下,如果遇到了失败的提示,比如这样: 这个并不一定是没有配置好导致的失败...,造成不能处理异常 2、添加请求头实现 优点:支持任意请求方式,并且后端出错会像非那样有报错,可以对异常进行处理 缺点:兼容性不是很好,IE的话 <IE10 都不支持此方式 虽然CORS的方法有点儿类似请求

    76510
    领券