解决ajax跨域的最全方案-js教程-PHP中文网

首页

web前端

js教程

解决ajax跨域的最全方案

韦小宝

Mar 08, 2018 pm 04:00 PM

ajax 方案

刚一开始学习JavaScript的时候还不知道ajax跨域到底是什么，不过经常跨域听到一些大佬们在聊ajax跨域的问题，想必也有同学和我一样的，那么我们今天就来看看ajax跨域到底是什么，解决ajax跨域的方法又是哪些！

前言

关于跨域，有N种类型，本文只专注于ajax请求跨域(,ajax跨域只是属于浏览器"同源策略"中的一部分,其它的还有Cookie跨域iframe跨域,LocalStorage跨域等这里不做介绍)，内容大概如下:

1. 什么是ajax跨域

原理

表现(整理了一些遇到的问题以及解决方案)

2. 如何解决ajax跨域

JSONP方式

CORS方式

代理请求方式

3. 如何分析ajax跨域

http抓包的分析

一些示例

什么是ajax跨域

ajax跨域的原理

ajax出现请求跨域错误问题,主要原因就是因为浏览器的“同源策略”,可以参考

浏览器同源政策及其规避方法

CORS请求原理

CORS是一个W3C标准，全称是"跨域资源共享"（Cross-origin resource sharing）。它允许浏览器向跨源服务器，发出XMLHttpRequest请求，从而克服了AJAX只能同源使用的限制。

基本上目前所有的浏览器都实现了CORS标准,其实目前几乎所有的浏览器ajax请求都是基于CORS机制的,只不过可能平时前端开发人员并不关心而已(所以说其实现在CORS解决方案主要是考虑后台该如何实现的问题)。

关于CORS，强烈推荐阅读

跨域资源共享 CORS 详解

另外，这里也整理了一个实现原理图(简化版):

如何判断是否是简单请求?

浏览器将CORS请求分成两类：简单请求（simple request）和非简单请求（not-so-simple request）。只要同时满足以下两大条件，就属于简单请求。

1、请求方法是以下三种方法之一：HEAD,GET,POST

2、HTTP的头信息不超出以下几种字段：

1。Accept

2。Accept-Language

3。Content-Language

4。Last-Event-ID

5。Content-Type(只限于三个值application/x-www-form-urlencoded、 multipart/form-data、text/plain)

凡是不同时满足上面两个条件，就属于非简单请求。

ajax跨域的表现

说实话，当初整理过一篇文章，然后作为了一个解决方案，但是后来发现仍然有很多人还是不会。无奈只能耗时又耗力的调试。然而就算是我来分析，也只会根据对应的表现来判断是否是跨域，因此这一点是很重要的。

ajax请求时,如果存在跨域现象,并且没有进行解决,会有如下表现:(注意，是ajax请求，请不要说为什么http请求可以，而ajax不行，因为ajax是伴随着跨域的，所以仅仅是http请求ok是不行的)

注意:具体的后端跨域配置请看题纲位置。

第一种现象:No 'Access-Control-Allow-Origin' header is present on the requested resource,并且The response had HTTP status code 404

@HO9)6~9`GBEP2@OFND7PT6.png

出现这种情况的原因如下：

1、本次ajax请求是“非简单请求”,所以请求前会发送一次预检请求(OPTIONS)

2、服务器端后台接口没有允许OPTIONS请求,导致无法找到对应接口地址

解决方案: 后端允许options请求

第二种现象:No 'Access-Control-Allow-Origin' header is present on the requested resource,并且The response had HTTP status code 405

这种现象和第一种有区别,这种情况下，后台方法允许OPTIONS请求,但是一些配置文件中(如安全配置),阻止了OPTIONS请求,才会导致这个现象

解决方案: 后端关闭对应的安全配置

第三种现象:No 'Access-Control-Allow-Origin' header is present on the requested resource,并且status 200

这种现象和第一种和第二种有区别,这种情况下，服务器端后台允许OPTIONS请求,并且接口也允许OPTIONS请求,但是头部匹配时出现不匹配现象

比如origin头部检查不匹配,比如少了一些头部的支持(如常见的X-Requested-With头部),然后服务端就会将response返回给前端,前端检测到这个后就触发XHR.onerror,导致前端控制台报错

解决方案: 后端增加对应的头部支持

第四种现象:heade contains multiple values '*,*'

Z8PP7B6VS79~~4$F0T]`8]A.png

表现现象是，后台响应的http头部信息有两个Access-Control-Allow-Origin:*

说实话，这种问题出现的主要原因就是进行跨域配置的人不了解原理，导致了重复配置，如:

1、常见于.net后台(一般在web.config中配置了一次origin,然后代码中又手动添加了一次origin(比如代码手动设置了返回*))

2、常见于.net后台(在IIS和项目的webconfig中同时设置Origin:*)

解决方案(一一对应):

1、建议删除代码中手动添加的*，只用项目配置中的即可

2、建议删除IIS下的配置*，只用项目配置中的即可

如何解决ajax跨域

一般ajax跨域解决就是通过JSONP解决或者CORS解决,如以下:(注意，现在已经几乎不会再使用JSONP了，所以JSONP了解下即可)

JSONP方式解决跨域问题

jsonp解决跨域问题是一个比较古老的方案(实际中不推荐使用),这里做简单介绍(实际项目中如果要使用JSONP,一般会使用JQ等对JSONP进行了封装的类库来进行ajax请求)

实现原理

JSONP之所以能够用来解决跨域方案,主要是因为

热AI工具

热工具

热门话题

gmail邮箱登陆入口在哪里

7469

CakePHP 教程

1376

steam的账户名称是什么格式

win11激活密钥永久

NYT连接提示和答案

显示更多

Related knowledge

解决jQuery AJAX请求遇到403错误的方法 Feb 20, 2024 am 10:07 AM

标题：解决jQueryAJAX请求出现403错误的方法及代码示例403错误是指服务器禁止访问资源的请求，通常会导致出现这个错误的原因是请求缺少权限或者被服务器拒绝。在进行jQueryAJAX请求时，有时候会遇到这种情况，本文将介绍如何解决这个问题，并提供代码示例。解决方法：检查权限：首先要确保请求的URL地址是正确的，同时验证是否有足够的权限来访问该资

解决jQuery AJAX请求403错误的方法 Feb 19, 2024 pm 05:55 PM

jQuery是一个流行的JavaScript库，用于简化客户端端的开发。而AJAX则是在不重新加载整个网页的情况下，通过发送异步请求和与服务器交互的技术。然而在使用jQuery进行AJAX请求时，有时会遇到403错误。403错误通常是服务器禁止访问的错误，可能是由于安全策略或权限问题导致的。在本文中，我们将讨论如何解决jQueryAJAX请求遭遇403错误

如何使用Ajax从PHP方法中获取变量？ Mar 09, 2024 pm 05:36 PM

使用Ajax从PHP方法中获取变量是Web开发中常见的场景，通过Ajax可以实现页面无需刷新即可动态获取数据。在本文中，将介绍如何使用Ajax从PHP方法中获取变量，并提供具体的代码示例。首先，我们需要编写一个PHP文件来处理Ajax请求，并返回所需的变量。下面是一个简单的PHP文件getData.php的示例代码：

如何解决jQuery AJAX报错403的问题？ Feb 23, 2024 pm 04:27 PM

如何解决jQueryAJAX报错403的问题？在开发网页应用程序时，经常会使用jQuery来发送异步请求。然而，有时候在使用jQueryAJAX时可能会遇到错误代码403，表示服务器禁止访问。这种情况通常是由服务器端的安全设置所导致的，但可以通过一些方法来解决这个问题。本文将介绍如何解决jQueryAJAX报错403的问题，并提供具体的代码示例。一、使

PHP 与 Ajax：构建一个自动完成建议引擎 Jun 02, 2024 pm 08:39 PM

使用PHP和Ajax构建自动完成建议引擎：服务器端脚本：处理Ajax请求并返回建议(autocomplete.php)。客户端脚本：发送Ajax请求并显示建议(autocomplete.js)。实战案例：在HTML页面中包含脚本并指定search-input元素标识符。

PHP 与 Ajax：创建动态加载内容的解决方案 Jun 06, 2024 pm 01:12 PM

Ajax（异步JavaScript和XML）允许在不重新加载页面情况下添加动态内容。使用PHP和Ajax，您可以动态加载产品列表：HTML创建一个带有容器元素的页面，Ajax请求加载数据后将数据添加到该元素中。JavaScript使用Ajax通过XMLHttpRequest向服务器发送请求，从服务器获取JSON格式的产品数据。PHP使用MySQL从数据库查询产品数据，并将其编码为JSON格式。JavaScript解析JSON数据，并将其显示在页面容器中。点击按钮触发Ajax请求，加载产品列表。

PHP 与 Ajax：提高 Ajax 安全性的方法 Jun 01, 2024 am 09:34 AM

为了提升Ajax安全性，有几种方法：CSRF保护：生成令牌并将其发送到客户端，在请求中添加到服务器端进行验证。XSS保护：使用htmlspecialchars()过滤输入，防止恶意脚本注入。Content-Security-Policy头：限制恶意资源加载，指定允许加载脚本和样式表的来源。验证服务器端输入：验证从Ajax请求接收的输入，防止攻击者利用输入漏洞。使用安全Ajax库：利用jQuery等库提供的自动CSRF保护模块。

ajax版本有哪些 Nov 22, 2023 pm 02:00 PM

ajax不是一个具体的版本，而是一种使用多种技术的集合来异步加载和更新网页内容的技术。ajax没有具体的版本号，但是有一些ajax的变体或扩展：1、jQuery AJAX；2、Axios；3、Fetch API；4、JSONP；5、XMLHttpRequest Level 2；6、WebSockets；7、Server-Sent Events；8、GraphQL等等。

See all articles

解决ajax跨域的最全方案

热AI工具

Undresser.AI Undress

AI Clothes Remover

Undress AI Tool

Clothoff.io

AI Hentai Generator

热门文章

热工具

记事本++7.3.1

SublimeText3汉化版

禅工作室 13.0.1

Dreamweaver CS6

SublimeText3 Mac版

热门话题