博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
AJAX 跨域 CORS 解决方案
阅读量:5359 次
发布时间:2019-06-15

本文共 2008 字,大约阅读时间需要 6 分钟。

本篇文章由:

两种跨域方法

在 Javascript 中跨域访问是比较常见的事情

就像现在比较流行写单页应用,而单页应用在访问 API 的时候就会有跨域的问题

要解决跨域的问题,其实也并不复杂,有两种方案可以选择

  1. Jsonp 跨域

Jsonp 的实现原理就是:创建一个回调函数,然后在远程服务上调用这个函数并且将 JSON 数据形式作为参数传递,完成回调。

  1. CORS(跨域资源共享)

跨源资源共享标准通过新增一系列 HTTP 头,让服务器能声明哪些来源可以通过浏览器访问该服务器上的资源。

对于 GET 以外的 HTTP 方法,或者搭配某些 MIME 类型的 POST 请求,如:PUT 或者 DELETE 等,

以及如果自定义了请求头的话,浏览器必须先以 OPTIONS 请求方式发送一个预请求 (Preflight Request),

从而获知服务器端对跨域请求所支持的 HTTP 方法,确认了服务器端允许该跨域请求的情况下,以实际的 HTTP 请求方法发送真正的请求。

跨域方法的选择

Jsonp 跨域方式,兼容性更好,如果需要兼容旧浏览器的话,可以考虑使用,但是这种方法不支持自定义请求头 (Request Headers)

不过,对于访问 API ,通常都是需要验证 Token 的,而 Token 都是需要放到请求头上的

所以对于正在写的一个单页应用,我选择了 CORS

CORS 跨域方式,兼容性其实也不差,至少可以兼容到 IE8 IE9,

兼容 IE8 IE9,需要使用 XDomainRequest 代替 XMLHttpRequests

这个是完全可以接受的

跨域的具体应用

使用 CORS,其实主要都是服务器端的配置,都是设置一系列的响应头 (Response Headers)

```    Access-Control-Allow-Origin:  http://www.YOURDOMAIN.com             // 设置允许请求的域名,多个域名以逗号分隔    Access-Control-Allow-Methods: GET, POST, PUT, DELETE, OPTIONS       // 设置允许请求的方法,多个方法以逗号分隔    Access-Control-Allow-Headers: Authorization                         // 设置允许请求自定义的请求头字段,多个字段以逗号分隔    Access-Control-Allow-Credentials: true                              // 设置是否允许发送 Cookies```

服务端以 PHP 为例:

```   
'1', 'data' => '')); ?>```

Javascript 代码直接使用 Ajax 即可:

```    $.ajax({        url: aURL,        type: aMethod,        data: aParams,        dataType: 'json',        timeout: 1000 * 120,        beforeSend: function (xhr) {            var token = $.cookie('token');            if (token) {                xhr.setRequestHeader('Authorization', 'Bearer ' + token);            }        },        success: function (response) {            if (response.code == 200) {                typeof aSuccess == 'function' && aSuccess(response.data);            } else {                typeof aError == 'function' && aError(response.message);            }        },        error: function(xhr, type){            typeof aError == 'function' && aError(xhr.status + ' '  + xhr.statusText);        }    });```

参考链接

转载于:https://www.cnblogs.com/xinpureZhu/p/5783250.html

你可能感兴趣的文章
SpringCloud知识点20190313
查看>>
c#中的Cache缓存技术
查看>>
Oracle 给已创建的表增加自增长列
查看>>
《DSP using MATLAB》Problem 2.17
查看>>
if 循环
查看>>
uva 111 History Grading(lcs)
查看>>
Python学习week2-python介绍与pyenv安装
查看>>
php判断网页是否gzip压缩
查看>>
一个有意思的js实例,你会吗??[原创]
查看>>
sql server中bit字段实现取反操作
查看>>
Part3_lesson2---ARM指令分类学习
查看>>
Django mysql 改用pymysql 驱动
查看>>
jQuery拖拽原理实例
查看>>
MyEclipse7.5注册码
查看>>
个人作业1--数组
查看>>
十天冲刺-02
查看>>
HDU1024_Max Sum Plus Plus
查看>>
【并行计算】基于OpenMP的并行编程
查看>>
.Net发出图片Request请求
查看>>
System V IPC相关函数
查看>>