js跨域抓取数据

一、基础概念

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

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

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

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

三、类型

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

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

四、应用场景

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

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

五、常见问题及解决方法

服务器未设置允许跨域头部信息
- 原因：服务器没有在响应头中添加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的方式如下：
- 但这种方式的代码可维护性和安全性较差，不建议在新项目中广泛使用。