浏览器跨域解决方案

前端跨域解决

跨域影响

CSRF 攻击的原理大致描述如下:有两个网站,其中A网站是真实受信任的网站,而B网站是危险网站。在用户登陆了受信任的A网站是,本地会存储A网站相关的Cookie,并且浏览器也维护这一个Session会话。这时,如果用户在没有登出A网站的情况下访问危险网站B,那么危险网站B就可以模拟发出一个对A网站的请求(跨域请求)对A网站进行操作,而在A网站的角度来看是并不知道请求是由B网站发出来的(Session和Cookie均为A网站的),这时便成功发动一次CSRF攻击

跨域现象

Access to XMLHttpRequest at 'http://A' from origin 'http://B' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

解决方案

flask解决跨域

# pip install Flask-Cors
from flask_cors import *

app = Flask(__name__)
CORS(app, supports_credentials=True)

nginx解决跨域

配置Header

单个域名/所有域名解决方案
    # * 代表所有,可以只使用http://xxxxx替换*,解决单个跨域的问题,不能同时加两个add_header Access-Control-Allow-Origin ,如果需要解决多个跨域问题,使用下面多个域名解决方案
    add_header Access-Control-Allow-Origin "*" always;
    add_header Access-Control-Allow-Methods 'GET, POST, OPTIONS';
    add_header Access-Control-Allow-Headers 'DNT,X-Mx-ReqToken,Keep-Alive,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Authorization';
多个域名解决方案
# 多个域名解决方案
if ($http_referer ~ (aaa.com$|bbb.com$) ) {
  add_header "Access-Control-Allow-Origin" "$http_referer" always;
    add_header Access-Control-Allow-Credentials 'true';
    add_header Access-Control-Allow-Methods 'GET, POST, OPTIONS';
    add_header Access-Control-Allow-Headers 'DNT,X-Mx-ReqToken,Keep-Alive,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Authorization';
}

配置反向代理

pass proxy xxxxx

注意事项

不能同时前后端处理跨域

不能同时处理跨域,即后端flask与前端nginx同时使用跨域解决方案

问题场景:浏览器 - nginx1 - nginx2 - flask

如果同时在nginx2和flask同时解决跨域出现下面现象:

Access to XMLHttpRequest at 'http://A/api1' from origin 'http://B/bpi1' has been blocked by CORS policy: Response to preflight request doesn't pass 'bpi1' access control check: The Access-control-Allow-origin header contains multiple values 'http://B,http://B',but only one is allowed

not allowed by Access-Control-Allow-Headers

Request header field Content-Type is not allowed by Access-Control-Allow-Headers in preflight response.

原因是设置了头部字段,会重置请求header,解决办法是在add_header Access-Control-Allow-Headers添加所需要的头部字段

参考链接

https://www.cnblogs.com/caimuqing/p/6733405.html

本文作者:朝圣

本文链接:www.zh-noone.cn/2020/12/浏览器跨域解决方案

版权声明:本博客所有文章除特别声明外,均采用CC BY-NC-SA 3.0许可协议。转载请注明出处!

http请求响应乱码
0 条评论