常见跨域问题

最新推荐文章于 2022-01-11 22:04:49 发布

转载最新推荐文章于 2022-01-11 22:04:49 发布 · 215 阅读

本文深入解析JSONP、CORS及服务器代理三种跨域解决方案的特点与适用场景，对比它们的优劣，帮助开发者选择最适合项目的跨域策略。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

jsonp：
既然它叫jsonp，很明显目的还是json，而且是跨域获取。根据上面的分析，很容易想到：利用js构造一个script标签，把json的url赋给script的scr属性，把这个script插入到dom里，让浏览器去获取
服务器端集成Script tags返回至客户端，通过javascript callback的形式实现跨域访问（这仅仅是JSONP简单的实现形式）
JSONP JSONP 是JSON with padding（填充式JSON 或参数式JSON）的简写。 JSONP是一种可以绕过浏览器的安全限制，从不同的域请求数据的方法。 JSONP请求不是ajax请求，是利用script标签能加载其他域名的js文件的原理，来实现跨域数据的请求特点：
1.只能为get请求

2.接口必须有回调函数的执行

3.支持所有浏览器，因为它是script标签
**CORS : **
CORS是跨源资源分享（Cross-Origin Resource Sharing）的缩写，它为Web服务器定义了一种方式，允许网页从不同的域访问其资源。
优点

1、 JSONP只能实现GET请求，而CORS支持所有类型的HTTP请求。

2、使用CORS，开发者可以使用普通的XMLHttpRequest发起请求和获得数据，比起JSONP有更好的错误处理。

3.CORS不支持IE8以下浏览器，但是绝大多数现代浏览器都已经支持了CORS。

4.灵活性，只需要在代码或者配置中心进行黑白名单配置即可，方便一直和拓展。

总结：

1.CORS与JSONP相比，更为先进，方便和可靠

2.开发者可以使用普通的XMLHttpRequest发起请求和获得数据，比起JSONP有更好的错误处理

3.公共即相互，涉及到对接的前端项目比较多，开发部署环境比较多，整体来将我个人推荐使用cors的方案，而对于一些对立性强的小项目，使用服务器代理可以降低成本，结合工作实际，按需使用，使用服务器代理方案是，最好使用内部域名/ip作为接口。
服务器代理：
由于浏览器有同源策略限制，（同源策略即协议域名端口相同），所以想要跨域访问其他域下的资源，需要绕开浏览器的这个限制，**可以在服务器端设置一个代理，由服务器端向跨域下的网站发出请求，再将请求结果返回给前端，**成功避免同源策略的限制。

此时前端相当于不跨域，和正常请求一致，无需额外配置。

灵活性：不同环境服务域名可能不一致，因此nginx配置也不相同，不便于移植。