什么叫ajax跨域访问
AJAX 跨域访问是用户访问A网站时所产生的对B网站的跨域访问请求均提交到A网站的指定页面。
Ajax请求一个目标地址为非本域（协议、域名、端口任意一个不同）的web资源，并根据响应获得外部应用数据。比如我们用Ajax访问城市天气预报、IP地址等公共服务接口时，就涉及跨域了。我们请求一个外部服务时，浏览器会基于安全问题拒绝授权访问。
扩展资料
Ajax的优点
使用Ajax的***优点，就是能在不更新整个页面的前提下维护数据。这使得Web应用程序更为迅捷地回应用户动作，并避免了在网络上发送那些没有改变的信息。
Ajax不需要任何浏览器插件，但需要用户允许Javascript在浏览器上执行。就像DHTML应用程序那样，Ajax应用程序必须在众多不同的浏览器和平台上经过严格的测试。随着Ajax的成熟，一些简化Ajax使用方法的程序库也相继问世。同样，也出现了另一种辅助程序设计的技术，为那些不支持Javascript的用户提供替代功能。
AJAX 跨域解决方案
# 前后端分离（ 服务器）
- 前端资源（html）- server-a 提供前端静态资源
- 后端数据（商品信息……）- server-b 提供基于http的api
#同源策略
当我们通过 xhr 的方式从一个源去获取另外一个源的数据的时候，就会触发同源策略的协议
**源**
域：协议+主机（ip、域名）+端口，比如
**同源策略**
**浏览器**的安全设定，避免浏览器中通过脚本等方式去获取非同源的数据
官方文档：
这套机制建立在一个核心内容基础之上：**http header**，这套机制定义了一系列的http头，通过这些http头来控制资源的访问。这些http头基本都是以 `access-control-?` 来进行命名的，不同的http头有不同的作用。
#普通资源请求
**[Access-Control-Allow-Origin]()**
控制当前允许访问该资源的源（origin）
# 非普通的资源请求
**简单请求 非简单请求**
当请求满足一定规则的时候，为简单请求
**预检请求**
如果当前请求满足了非简单请求，那么就会先发送一个 method 为 options 的请求（浏览器），称为**预检**，后端需要对这个预检请求进行处理，根据业务返回对应的头信息，来告知客户端是否允许发送非简单请求，我们需要在预检请求中返回一系列的头信息，来控制之前发送的非简单请求是否继续
**附带身份凭证的请求**
cookie 实际也是会受到同源策略的限制的，如果非同源请求，cookie是默认被***止携带处理的。
解决：
- 客户端在请求中要设置：withCredentials: true
- 服务端要在cors中设置：ctx.set('Access-Control-Allow-Credentials', 'true');
## 利用 koa-server-http-proxy 实现服务端代理
利用 koa-server-http-proxy 来处理正向代理
## 基于jwt鉴权（jsonwebtoken)
**cookie**
使用cookie来实现用户鉴权
- 目前cookie限制太多
- cookie会在一些情况下被***用
**放置另外一个地方**
- 请求必须是可控的（ajax）
- 基于前后端开发的应用基本都是使用ajax方式进行
**jwt**
Ajax 跨域问题及其解决方案
主流的 前后端分离模式 下，当前端调用后台接口时，由于是在非同一个域下的请求，从而会引发 浏览器 的自我安全保护机制，最终结果是 接口成功请求并响应 ，但 前端不能正常处理该返回数据 。
因此，当 同时满足 以下三个条件的情况下，就会出现跨域问题：
想要彻底解决跨域问题，只需要破坏以上三个条件的任一即可：
添加浏览器启动参数： chrome --disable-web-security ，但是极不推荐这种解决方式。
Jsonp，全称 JSON with Padding ，一种非官方的协议，而是一种约定；前端通过向后台发送 script 类型请求解决跨域，此时接口响应的 application/javascript 类型的数据会作为 callback 函数的参数进行处理。
所以，后台也需要做相应的处理。以 Java 为例，添加如下配置即可：
综上， jsonp 请求存在以下几个弊端：
用 Nginx 或 Apache 来代理调用方的请求（ 客户端变更为相对路径请求，而非绝对路径 ），此时对于浏览器来说，由于请求是同源的，因此就不存在跨域问题。
以 Java 应用为例，添加如下全局配置：
如果只想针对某个类下的接口，或者是某个具体的接口配置允许跨域，只需要在相应的地方添加注解 @CrossOrigin 即可。
如果配置了 nginx 作为代理服务器，那么只需要为 nginx 添加支持跨域请求即可：
Q1：浏览器在执行跨域请求时，是先执行后判断，还是先判断后执行？
A1：都有可能，这需要根据所发送的请求是 简单请求 还是 非简单请求 来判断；如果是非简单请求，浏览器每次在执行真正的请求之前，还会先发送一个 options 请求方式的预检命令【 可设定缓存时长，取消每次请求都要预检，提高效率，参考上面的服务端配置 】。关于两种请求的区分及定义，参考下图说明：
Q2：如果是允许带（ 被调用方 ） cookie 的跨域请求，此时服务端同样配置为 Access-Control-Allow-Origin 等于 * ，前端是否还可以请求成功？
A2：不可以，此时要将 Access-Control-Allow-Origin 指定为 调用方 具体的域【 可以先取得调用方的域再动态配置，这样就不存在多个域请求的限制问题 】，并且添加配置 Access-Control-Allow-Credentials 为 true 。
ajax跨域请求处理及header自定义设置
最近做了一个应用管理系统，采用前后端分离方式开发，前端使用了l***uiadmin框架，后端使用了 .net web api，在开发过程中，遇到了ajax跨域问题及header自定义设置，这是所有前后端分离开发都需要解决的问题，在此做一个记录。
在前端ajax请求时，我们在header中设置了自定义的头部信息，将token写入了头部，便于后端进行身份认证， 如：xhr.setRequestHeader("Authorization", access_token)。通过了ajax全局方法做了统一处理。
在设置了自定义header后，浏览器到后端请求将分为两步进行。
浏览器将先发送一个预请求OPTIONS到后端，这里后端需要对OPTIONS请求做出正确响应，可以直接返回200状态码，不用返回内容信息。
浏览器接收到OPTIONS正确响应后会自动执行发送get或post请求。可此时依旧没有请求到后端数据，F12查看控制台输出，会发现报错了。这就是接下来要处理的跨域问题。
跨域的处理主要是服务器端设置响应头，针对.net web api 可直接在web.config文件中的system.webServer节点中进行设置，如图：
Access-Control-Allow-Origin; //支持全域名访问，不安全，部署后需要固定限制为客户端网址
Access-Control-Allow-Methods; //支持的http 动作
Access-Control-Allow-Headers; //响应头 请按照自己需求添加
设置完成后，前端在chrome下调用api接口能正常相应，但在IE下依旧报错，如图：
最终发现，我们自定义设置了Authorization，在IE下，后端并没有给出相应的响应，原以为Access-Control-Allow-Headers设置为*，就能表示所有的响应头，但在IE下不行，需要将自己对应的需求以此设置。如图
设置完后，就可成功访问后端api。
ajax请求本地json文件出现跨域问题
开发的时候,会经常使用一些假数据,这个时候我们就会在本地进行ajax请求（开发工具使用vscode，如果是webstrom则不会有这个问题）,来获取数据,例如ajax本地请求json文件，但是在请求的时候会遇到跨域问题：
建议使用火狐浏览器,因为谷歌浏览器是不允许跨域请求的,因为不安全,但是我们现实中,很多地方是必须要用到跨域请求，谷歌浏览器严格遵循,但是火狐浏览器考虑到现实因素,就可以使用跨域,但是需要进行一些设置.
1、在Firefox的地址栏输入“about:config”，回车
2、在过滤器（filter）中搜索“security.fileuri.strict_origin_policy”(***次会出现安全协议,点击确认即可)
3、双击security.fileuri.strict_origin_policy设置为false
4、关闭目前开启的所有Firefox窗口，然后重新启动Firefox,这个时候就可以了.
虽然会报格式不佳的错误，但是数据还是请求出来滴！
ajax跨域请求的介绍就聊到这里吧，感谢你花时间阅读本站内容，更多关于ajax跨域请求方法、ajax跨域请求的信息别忘了在本站进行查找喔。