跨域的另一种方法

跨域一直是困扰前端开发人员的一个老大难问题。在使用 Ajax 技术进行跨域请求时，浏览器会出于安全考虑而阻止这种行为。为了解决这个问题，JSONP（JSON with Padding）技术应运而生。

JSONP 是一种利用 <script> 标签的跨域请求方式。它的原理是：服务器返回一个包含 JavaScript 代码的 JSONP 响应，其中包含着需要获取的数据。客户端的 <script> 标签加载这个 JSONP 响应，并执行它，从而获取数据。

不过，JSONP 也有一个局限性，那就是它只能用于 GET 请求。对于需要进行 POST 请求的情况，JSONP 就无能为力了。因此，当我们遇到跨域 POST 请求时，就需要借助另一种方法：CORS。

什么是 CORS？

CORS（Cross-Origin Resource Sharing）是一种允许不同源的浏览器向服务器发送跨域请求并获取响应的机制。它通过在 HTTP 头部中添加一些额外的信息来实现跨域请求的安全性。

如何使用 CORS？

要使用 CORS，需要在服务器端进行配置。服务器需要在响应头中添加以下内容：

Access-Control-Allow-Origin: https://example.com
Access-Control-Allow-Credentials: true
Access-Control-Allow-Methods: GET, POST, PUT, DELETE
Access-Control-Allow-Headers: Content-Type, X-Requested-With

其中：

• Access-Control-Allow-Origin 指定了允许跨域请求的源地址。可以指定一个具体的域名，也可以使用通配符 * 表示允许所有域名跨域请求。
• Access-Control-Allow-Credentials 指定了是否允许跨域请求携带凭证（如 cookies、HTTP 认证信息）。
• Access-Control-Allow-Methods 指定了允许跨域请求的方法。
• Access-Control-Allow-Headers 指定了允许跨域请求的 HTTP 头部字段。

JSONP 与 CORS 的对比

特性	JSONP	CORS
请求方式	GET	GET、POST、PUT、DELETE
数据格式	JSON	JSON、XML、HTML、图片等
浏览器支持	所有主流浏览器	IE10+、Firefox 3.5+、Chrome 4+
安全性	较低	较高
使用场景	简单的数据获取	复杂的数据操作