跨域请求资源-jsonp和cors区别.pdf

JavaScript出于安全方面的考虑，不允许跨域调用其他页面的对象。那什么是跨域呢，简单地理解就是因为JavaScript同源策略的限制，a.com域名下的js无法操作b.com或是c.a.com域名下的对象。 当协议、子域名、主域名、端口号中任意一个不相同时，都算作不同域。不同域之间相互请求资源，就算作“跨域”。 CORS需要浏览器和服务器同时支持。目前，所有浏览器都支持该功能，IE浏览器不能低于IE10。 整个CORS通信过程，都是浏览器自动完成，不需要用户参与。对于开发者来说，CORS通信与同源的AJAX通信没有差别，代码完全一样。浏览器一旦发现AJAX请求跨源，就会自动添加一些附加的头信息，有时还会多出一次附加的请求，但用户不会有感觉。 因此，实现CORS通信的关键是服务器。只要服务器实现了CORS接口，就可以跨源通信。 ### 跨域请求资源——JSONP与CORS的区别 #### 一、跨域的基本概念 在Web开发中，“跨域”是指从一个域名发起请求到另一个域名。这主要是因为浏览器出于安全考虑实施了**同源策略**（Same-Origin Policy）。同源策略要求，只有在协议、子域名、主域名以及端口号全部一致的情况下，两个资源才被认为是同源的。一旦存在任何一项不同，就认为是不同源，从而不允许进行直接交互。 #### 二、JSONP的工作原理及特点 - **JSONP**（JSON with Padding）是一种利用`<script>`标签不受同源策略限制的特点来实现跨域请求的技术。 - JSONP的实现原理是动态插入`<script>`标签，并将回调函数名作为参数传递给服务器，服务器返回的结果会在客户端注册的回调函数中执行。 - JSONP仅支持GET请求，因为它依赖于`<script>`标签，而`<script>`标签只能通过GET方式加载外部资源。 - JSONP不涉及浏览器的预检请求机制，也不使用标准的XMLHttpRequest对象，因此在实现上相对简单。 #### 三、CORS的工作机制与特点 - **CORS**（Cross-Origin Resource Sharing，跨源资源共享）是一个W3C标准，用于定义服务器如何响应来自不同源的HTTP请求。 - CORS由服务器端配置完成，主要通过HTTP头部中的`Access-Control-Allow-Origin`字段来指定哪些源可以访问其资源。 - CORS支持所有HTTP请求方法，包括GET、POST等，这使得它比JSONP更加灵活。 - CORS还支持预检请求（preflight request），这是一种由浏览器自动发出的OPTIONS请求，用于确认服务器是否允许特定类型的跨域请求。预检请求通常发生在包含复杂的请求方法（如PUT或DELETE）或者自定义HTTP头的情况。 #### 四、CORS与JSONP的比较 1. **请求类型**： - JSONP只支持GET请求。 - CORS支持所有HTTP请求类型，包括GET、POST等。 2. **安全性**： - JSONP的安全性较低，因为它完全依赖于服务端返回的脚本来执行回调函数。 - CORS提供了更多的安全选项，如通过`Access-Control-Allow-Credentials`字段控制是否允许携带cookie等敏感信息。 3. **兼容性**： - JSONP可以在几乎所有现代浏览器中使用。 - CORS则需要浏览器支持，尽管现代浏览器均已支持CORS，但某些老旧版本的浏览器可能不支持。 4. **实现难度**： - JSONP的实现较为简单，只需要在客户端注册一个回调函数即可。 - CORS则需要服务器端配合，通过设置相应的HTTP头部来启用跨域访问。 #### 五、CORS的具体配置示例 在服务器端，为了启用CORS，通常需要设置以下HTTP头部： - `Access-Control-Allow-Origin`: 指定允许访问的源。 - `Access-Control-Allow-Methods`: 指定允许的请求方法。 - `Access-Control-Allow-Headers`: 指定允许的请求头部。 - `Access-Control-Max-Age`: 指定预检请求的有效期。 例如，在Node.js中，可以使用`cors`模块轻松启用CORS支持： ```javascript const express = require('express'); const cors = require('cors'); const app = express(); // 使用cors中间件启用CORS支持 app.use(cors()); app.get('/example', (req, res) => { res.json({ message: 'Hello from server!' }); }); app.listen(3000, () => { console.log('Server running on port 3000'); }); ``` 通过这种方式，服务器就能够支持来自不同源的请求，并且客户端可以像发送普通AJAX请求一样发送跨域请求，无需额外处理。 #### 六、总结 JSONP和CORS都是解决跨域问题的有效手段，但它们各有优缺点。JSONP更适用于简单的GET请求场景，而CORS则提供了更为全面的解决方案，支持多种请求类型并具有更高的安全性。在实际项目中，应根据具体需求选择合适的方法。