Web跨域学习笔记

一、什么是跨域

1、跨域的场景

  跨域是指跨域名的访问，以下情况都属于跨域：

跨域原因说明	示例
协议不同	http://与https://
域名不同	www.yunyi.com 与 blog.yunyi.com
端口不同	www.yunyi.com:8080 与 www.yunyi.com:8081

2、为什么会有跨域问题

  跨域问题是因为浏览器的同源策略(对于ajax请求的一种安全限制)：一个页面发起的ajax请求，只能是当前页同域名的路径，这能有效的阻止跨站攻击。因此：跨域问题 是针对ajax的一种限制。

 

 原文链接：https://www.jianshu.com/p/98d4bc7565b2

3、不存在跨域问题的场景

  uni-app - APP、小程序应用下；只要js不运行在Webview下，不存在跨域问题。

二、跨域的几种解决方案

1、Jsonp：

  最早的解决方案，利用script标签可以跨域的原理实现。需要 服务的支持 且 只能发起GET请求不安全。

  示例：使用 JSONP 实现跨域（速通）。

2、CORS（Cross-origin resource sharing）：

  W3C标准化规范化的跨域请求解决方案，安全可靠。需要服务器支持且如果是IE浏览器则不能低于IE10。

  它允许浏览器向跨源服务器发出XMLHttpRequest请求，从而克服了AJAX只能同源使用的限制。实现CORS通信的关键是服务器。只要服务器实现了CORS接口，就可以跨源通信。浏览器将CORS请求分成两类：简单请求（simple request）和非简单请求（not-so-simple request）。CORS中浏览器对这两种请求的处理，是不一样的。

  不需要在前端代码中设置, 只需要在后台代码中设置，允许CORS跨端即可。


  文档：https://developer.mozilla.org/zh-CN/docs/Web/HTTP/CORS

（1）NetCore7 CORS跨域示例

（2）uni-app 小程序云开发中的CORS跨域示例

  注：在调试时，HBuilderX内置浏览器不存在跨域问题，其他浏览器可以安装禁止浏览器报跨域的插件

3、proxy（如：Nginx）：

  通过代理服务器转发请求，实现跨域，支持各种请求方式。

（1）Nginx跨域配置示例：

  下面/api开头的后台服务映射到后台服务的地址

server {
  listen 888;
  server_name localhost;
  root /root/FirstApi/;
  index index.html index.htm;

  location /api {  # /api开头的后台服务映射到后台服务的地址
    proxy_pass http://localhost:5000;
  }
}

（2）Vue -webpack-dev-server 跨域配置示例：

  见：Vue_webpack-dev-server跨域(proxy)

（3）Vue -Vite 跨域配置示例：

  见：Vue_Vite跨域(proxy)