同源策略和跨域问题

70 阅读1分钟

同源策略

协议+host(域名)+端口号相同的url称为同源的url。

1.浏览器给A服务器发送请求。

2.A服务器给浏览器返回html文件。

3.html中有一段脚本,发起网络请求。若网络请求的地址是不同源的,就会发生跨域错误。

跨域问题的解决方案

1. Node服务器代理

原理:服务器之间发起网络请求,没有跨域问题

image.png

前提条件:

前端项目和Node服务器部署在同一个服务器,保证他们的协议+host(域名)+端口号相同。此时前端项目给node服务器发送网络请求不会跨域,node服务器给其他服务器发送网络请求也没有跨域问题。

或者

Node服务器开启CORS。Access-Control—Allow-Origin 配置* 或者指定的url。此时前端项目给node服务器发送网络请求不会跨域,node服务器给其他服务器发送网络请求也没有跨域问题。

举例:前端部署在http://localhost:9000 端口,前端给 http://localhost:9000/api/users/list 发送请求,无跨域问题。

image.png

Node代理服务器配置如下:

image.png

2.Nginx反向代理

Nginx服务器配置Access-Control—Allow-Origin,允许某些域访问自己。

image.png

image.png