js 跨域 调用

一、基础概念

1. 同源策略
   • 浏览器的安全功能，它规定了一个源（协议 + 域名+端口）的文档或脚本只能与来自同一源的资源进行交互。例如，http://example.com下的页面只能请求http://example.com下的资源（假设端口相同）。

• 跨域调用
  • 当一个网页中的脚本试图去请求不同源（协议、域名或者端口有一个不同）的资源时，就发生了跨域调用。

二、相关优势

1. 资源共享
   • 不同源的服务可以共享数据。例如，一个天气预报服务可以被多个不同网站调用，为用户提供天气信息。

• 功能扩展
  • 可以利用其他源的特色功能。比如，一个小的创业公司网站可以利用大型地图服务提供商的地图功能来展示自己的门店位置。

三、类型

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

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

四、应用场景

1. 第三方API集成
   • 如在电商网站中集成支付网关（可能是不同源的），或者集成社交登录（如微信登录，微信的登录接口与电商网站不同源）。

• 数据获取
  • 从一个数据提供商获取数据并在自己的网页上展示，例如从新闻数据提供商获取新闻列表。

五、常见问题及解决方法

1. 问题：为什么会出现跨域错误？
   • 当浏览器按照同源策略检测到请求的资源与当前页面来源不同时，就会阻止请求（如果没有正确的跨域配置），从而出现跨域错误。

• 解决方法
  • 服务器端设置CORS（跨域资源共享）头信息
    • 在服务器端（例如使用Node.js的Express框架）：
    • 在服务器端（例如使用Node.js的Express框架）：
    • 这里Access - Control - Allow - Origin设置为*表示允许所有源访问，也可以设置为特定的源，如http://example.com。
  • JSONP（仅适用于GET请求）
    • 原理是利用<script>标签没有跨域限制的特性。
    • 在前端：
    • 在前端：
    • 在服务器端（以Node.js为例）：
    • 在服务器端（以Node.js为例）：
  • 代理服务器
    • 在本地开发环境中，可以使用webpack - dev - server等工具设置代理。例如在vue.config.js（如果使用Vue.js）中：
    • 在本地开发环境中，可以使用webpack - dev - server等工具设置代理。例如在vue.config.js（如果使用Vue.js）中：
    • 这样前端请求/api/some - endpoint时，会被代理到http://another - origin.com/some - endpoint，绕过浏览器的跨域限制。