ajax 请求外域,AJAX 跨域问题

关于 AJAX 的介绍和使用我之前写过，这里就不写了。如果要了解 AJAX 可以访问下面两篇文章：

因为浏览器同源策略的限制，一个网站的 AJAX 是不能请求另一个网站的内容的。这里说的另一个网站就是 域名 或 端口号 不相同的网站，比如 我的网站域名是 a.com ，我就不能通过 AJAX 请求 b.com 的内容。

直接跨域请求

下面是一个简单的 AJAX 请求，我的域名是 localhost，我要请求 https://www.misterma.com/ajax.php：let url = 'https://www.misterma.com/ajax.php?test=123';

let xhr = new XMLHttpRequest();

xhr.open('get', url, true);

xhr.send();

xhr.onreadystatechange = () => {

if (xhr.readyState == 4) {

if (xhr.status == 200) {

console.log(xhr.responseText); // 在控制台输出请求到的内容

}else {

console.log(xhr.status); // 在控制台输出 HTTP 状态码

}

}

}

浏览器控制台出现了如下的提示：Access to XMLHttpRequest at 'https://www.misterma.com/ajax.php?test=123' from origin 'http://localhost' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

XHR 2

XHR 2 全称为 XMLHttpRequest Level 2， 是 XMLHttpRequest 的升级版，其中就加入了跨域请求的功能。不过只有支持 HTML 5 的浏览器才能使用，IE 至少需要 IE 10。

如果要使用 XHR 2 的跨域请求还必须要拥有服务器端的控制权，也就是说 如果你想请求其他人的网站是不可以的。服务器端 header 需要输出 Access-Control-Allow-Origin:* 和 Access-Control-Allow-Methods:POST,GET 。

其中 Access-Control-Allow-Origin:* 中的 * 就是允许所有外域访问，如果要设置允许访问的域名可以这样写：Access-Control-Allow-Origin:http://a.com，其中的 http://a.com 就是允许访问的域名。

Access-Control-Allow-Methods:POST,GET 中的 POST 和 GET 就是允许的请求方式。

下面还是在 localhost 给 https://www.misterma.com/ajax.php 发送 AJAX 请求，JS 代码还是和上面的一样，服务器端 PHP 代码如下：<?php

header('Access-Control-Allow-Origin:*');

header('Access-Control-Allow-Methods:POST,GET');

// 判断是否有参数为 test 的 get 请求

if (isset($_GET['test'])) {

echo $_GET['test']; // 输出前端发送的内容

}

控制台成功的输出了 123 。

以上就是跨域请求最简单的方式。除了上面写的方式外也可以通过 JSONP 来请求，不过 JSONP 只能实现 get 请求，而且同样需要后端的配合。关于 JSONP 请求以后有时间再写一篇。

版权声明：本文为原创文章，版权归 Mr. Ma's Blog 所有，转载请联系博主获得授权。

如果对本文有什么问题或疑问都可以在评论区留言，我看到后会尽量解答。