js 跨域问题

一、基础概念

在JavaScript中，同源策略是一种安全机制，它规定浏览器只能向与自身来源（协议、域名、端口都相同）相同的域发送请求并获取数据。跨域就是指在浏览器中向不同源（协议、域名或者端口有一个不同就算不同源）发送请求的情况。

二、相关优势

1. 安全性
   • 同源策略防止恶意网站读取其他网站的敏感数据。例如，一个恶意的电商网站不能通过JavaScript获取用户在银行网站上的登录信息。

• 数据隔离
  • 不同源之间的数据相互隔离，有助于维护各个网站或应用的独立性和完整性。

三、类型

1. 协议跨域
   • 如http和https之间的请求。例如，在http协议的页面中向https协议的服务器发送AJAX请求。

• 域名跨域
  • 不同的域名之间，像www.example.com向www.test.com发送请求。
• 端口跨域
  • 相同域名不同端口的情况，例如www.example.com:8080向www.example.com:3000发送请求。

四、应用场景

1. 第三方API调用
   • 当网站需要集成来自其他提供商的服务时，如天气数据提供商、地图服务提供商等，这些服务往往在不同的域上。

• 微服务架构下的前端与后端交互
  • 在一个大型应用中，前端和后端可能部署在不同的服务器或者不同的端口上，需要进行跨域通信。

五、问题原因及解决方法

1. 原因
   • 浏览器的同源策略限制。当违反同源策略时，浏览器会阻止请求的发送或者阻止对响应数据的访问。

• 解决方法
  • CORS（跨域资源共享）
    • 服务器端设置响应头。例如，在Node.js的Express框架中：
    • 服务器端设置响应头。例如，在Node.js的Express框架中：
    • 这里的Access - Control - Allow - Origin可以设置为特定的源（如http://www.example.com）或者*（表示允许所有源，但不太安全）。
  • JSONP（JSON with Padding）
    • 这是一种利用<script>标签没有跨域限制的特性。例如：
      • 前端代码：
      • 前端代码：
      • 后端（以Node.js为例）：
      • 后端（以Node.js为例）：
    • 但是JSONP只支持GET请求，并且存在一定的安全风险。
  • 代理服务器
    • 在前端开发环境中，如使用Webpack的devServer可以设置代理。例如在webpack.config.js中：
    • 在前端开发环境中，如使用Webpack的devServer可以设置代理。例如在webpack.config.js中：
    • 这样前端发送到/api的请求会被代理到http://www.otherdomain.com，从而绕过浏览器的跨域限制。