标签：10 12 跨域 jsonp 端口 2020 同源 CORS 请求

Ajax 跨域

同源策略

编程中的同源，比较的是两个url是否同源。

主要看下面三个方面：

• 协议是否相同（http https file）
• 主机地址是否相同（www.xxx.com 127.0.0.1）
• 端口（0~65535）（http默认端口是80；https默认端口是443；MySQL默认端口3306）

如果两个url的协议、主机地址、端口都相同，那么这两个url是同源的，否则就是非同源。

违反了同源策略的请求，叫做跨域请求。

如果非同源，那么以下三种行为会受到限制：

• Cookie 无法操作
• DOM 无法操作
• Ajax请求无效（请求可以发送，服务器也会处理这次请求，但是响应结果会被浏览器拦截）

解决跨域

主流的方案有两种：分别是JSONP和CORS.

JSONP

• 原理
  • 客户端利用 script 标签的 src 属性，去请求一个接口，因为src属性不受跨域影响。
  • 服务端响应一个字符串
  • 客户端接收到字符串，然后把它当做JS代码运行。
• 前端需要做什么？
  • 如果使用jQuery，$.ajax({ dataType: 'jsonp' }，必须指定dataType选项为jsonp即可
• 后端需要做什么？
  • 如果使用express，那么直接调用 res.jsonp(数据) 即可。

CORS

由于XHR对象被W3C标准化之后，提出了很多XHR Level2的新构想，其中新增了很多新方法（onload、response…）和CORS跨域资源共享。浏览器升级后开始支持CORS方案。

CORS才是解决跨域的真正解决方案。

• 前端需要做什么？
  • 无需做任何事情，正常发送Ajax请求即可
• 后端需要做什么？
  • 需要加响应头 。或者使用第三方模块 cors 。

标签：10,12,跨域,jsonp,端口,2020,同源,CORS,请求
来源： https://blog.csdn.net/weixin_50418353/article/details/111017103

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。