关于 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 中的 POSTGET 就是允许的请求方式。

下面还是在 localhosthttps://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 所有,转载请联系博主获得授权!
本文地址:https://www.misterma.com/archives/817/
如果您对本文有什么问题或疑问都可以在评论区留言,我看到后会尽量解答。