2_JS 跨域问题

是什么

浏览器在保证安全的前提下，使用同源策略

同源策略（Sameoriginpolicy）是一种约定，它是浏览器最核心也最基本的安全功能，如果缺少了同源策略，则浏览器的正常功能可能都会受到影响。可以说 Web 是构建在同源策略基础之上的，浏览器只是针对同源策略的一种实现。同源策略会阻止一个域的 javascript 脚本和另外一个域的内容进行交互

所谓同源（即指在同一个域）就是两个页面具有相同的协议 protocol ），主机（host）和端口号（port）当一个请求url 的协议、域名、端口三者之间任意一个与当前页面 url 不同即为跨域

• 协议
• 域名
• 端口

---

如何解决

方案一：

使用 nginx 反向代理，将 url 映射成同源的

方案二：

使用 jsonp

JSONP 是服务器与客户端跨源通信的常用方法。最大特点就是简单适用，兼容性好（兼容低版本IE），缺点是只支持 get 请求，不支持 post 请求。核心思想：网页通过添加一个 元素，向服务器请求 JSON 数据，服务器收到请求后，将数据放在一个指定名字的回调函数的参数位置传回来。

方案三：

使用 CROS

CORS 是一个 W3C 标准，全称是"跨域资源共享"（Cross-origin resource sharing）。CORS 需要浏览器和服务器同时支持。目前，所有浏览器都支持该功能，IE浏览器不能低于IE10。它允许浏览器向跨源服务器，发出XMLHttpRequest 请求，从而克服了 AJAX 只能同源使用的限制。整个 CORS 通信过程，都是浏览器自动完成，不需要用户参与。对于开发者来说，CORS 通信与同源的 AJAX 通信没有差别，代码完全一样。浏览器一旦发现 AJAX请求跨源，就会自动添加一些附加的头信息，有时还会多出一次附加的请求，但用户不会有感觉。因此，实现 CORS通信的关键是服务器。只要服务器实现了 CORS 接口，就可以跨源通信。

---

SpringBoot 中使用 CROS

在 springboot 中使用 CROS 非常简单，只需要在 Controller 类上添加上 @CrossOrigin 注解就可以实现

@RestController
@RequestMapping("/brand")
@CrossOrigin
public class BrandController {
    @Autowired
    private ApiBrandFeign apiBrandFeign;

    @RequestMapping(value = "/query/{page}/{rows}", method = RequestMethod.POST)
    public HttpResult queryBrand(@RequestBody(required = false) Brand brand, @PathVariable Integer page, @PathVariable Integer rows) {
        return apiBrandFeign.findPage(brand, page, rows);
    }
}

当然在 Controller上添加 @CrossOrigin 后只对当前Controller中的 url 生效，这样使用起来是非常麻烦的，所以如果想一劳永逸的话，推荐在 zuul 网关中配置 CROSFilter

---