js跨域抓取数据

一、基础概念

1. 同源策略
   • 浏览器的安全功能，它规定：协议、域名、端口都相同的网页才能共享资源。例如，http://example.com下的页面只能请求http://example.com下的资源，如果向https://example.com或者http://api.example.com发送请求就会违反同源策略。

• 跨域
  • 当协议、域名或者端口有一个不同就会产生跨域问题。比如前端页面在http://localhost:3000运行，要请求后端接口http://192.168.0.100:8080/api就属于跨域。

二、相关优势（准确说是解决跨域问题的优势）

1. 数据获取灵活性
   • 如果不解决跨域问题，前端只能请求与自身同源的数据，这极大地限制了前端获取数据的范围。解决跨域后，可以从不同的服务器、不同的域名获取各种需要的数据，方便构建功能丰富多样的Web应用。

• 整合资源
  • 可以整合多个不同来源的服务，例如一个电商网站的前端页面可以跨域调用来自不同供应商的商品图片、库存信息等服务的接口。

三、类型

1. 简单请求跨域
   • 满足特定条件的跨域请求（如GET、POST请求且HTTP头部信息没有特殊设置等情况）。浏览器会直接发送请求，在响应头中如果有合适的Access - Control - Allow - Origin等相关头部信息就可以正常获取数据。

• 复杂请求跨域
  • 不满足简单请求条件的跨域请求（如PUT、DELETE请求或者自定义头部等情况）。浏览器会先发送一个预检请求（OPTIONS请求）到服务器，询问服务器是否允许该跨域请求，服务器如果允许则再发送实际的请求。

四、应用场景

1. 前后端分离项目
   • 前端和后端独立开发和部署，很可能不在同一个域下。例如前端使用Vue.js构建的单页面应用（SPA）部署在https://front.example.com，后端基于Node.js的API服务部署在https://back.example.com，前端需要跨域调用后端的接口来获取用户数据、提交表单等操作。

• 第三方数据集成
  • 网站想要集成第三方的天气数据、地图数据等服务。比如一个旅游网站想要在自己的页面上显示某个地区的天气情况，而天气数据来自另一个域名的天气服务提供商，就需要跨域请求来获取数据。

五、常见问题及解决方法

1. 服务器未设置允许跨域头部信息
   • 原因：服务器没有在响应头中添加Access - Control - Allow - Origin等相关头部来允许特定的源或者所有源进行跨域访问。
   • 解决方法（以Node.js + Express为例）
   • 解决方法（以Node.js + Express为例）

• 预检请求失败
  • 原因：对于复杂请求，服务器没有正确处理OPTIONS预检请求，可能没有返回正确的允许的方法、头部等信息。
  • 解决方法：按照上述在服务器端设置正确的Access - Control - Allow - Methods、Access - Control - Allow - Headers等头部信息，并且对OPTIONS请求进行正确响应。
• JSONP（一种旧的跨域解决方案）相关问题
  • 局限性：JSONP只支持GET请求，并且存在安全风险（如可能被恶意注入脚本）。
  • 解决方法：尽量使用CORS（跨域资源共享，现代浏览器普遍支持的跨域解决方案）来替代JSONP。如果必须使用JSONP，要确保请求的数据来源可靠并且对输入进行严格验证。例如在jQuery中使用JSONP的方式如下：
  • 解决方法：尽量使用CORS（跨域资源共享，现代浏览器普遍支持的跨域解决方案）来替代JSONP。如果必须使用JSONP，要确保请求的数据来源可靠并且对输入进行严格验证。例如在jQuery中使用JSONP的方式如下：
  • 但这种方式的代码可维护性和安全性较差，不建议在新项目中广泛使用。