跨域原理及解决
admin
2024-03-06 00:52:33

跨域

跨域的出现:

  1. 出于浏览器的同源策略限制。同源策略(Sameoriginpolicy)是一种约定,它是浏览器最核心也最基本的安全功能.
  2. 注意同源策略,是因为浏览器,所以跨域的出现根本原因是浏览器,因此postman测试请求可以的接口,出现跨域很正常.
  3. 解决方法:在服务端解决.

proxy代理(本地开发环境)

  1. wabpack设置proxy代理:本质nodejs开的服务. 语法是node语法.
  2. 只支持本地环境,如上线后是同源最好,如上线后不同源,需配置Nginx代理.
    devServer: { //nodejs服务端代理proxy: {host: "0.0.0.0",port: 8088,https: false,hotOnly: false,proxy: { //nodejs服务端代理'/jacloud-web': {target: "http://110.53.177.22:8200/jacloud-web", //目标地址 即nodejs遇到前缀开头的会在前加上该地址。ws: true, //webSocket长连接changeOrigin: true, //是否跨域pathRewrite: { //路径重写 作用去掉/jacloud-web 如果前缀重复的情况.
// 原请求地址为/jacloud-web/todos 不替换时,http://110.53.177.22:8200/jacloud-web/jacloud-web/todos.               // 原请求地址为 /jacloud-web/todos 将'/jacloud-web'替换''时,// 代理后的请求地址为:http://110.53.177.22:8200/jacloud-web/todos"^/jacloud-web": "" //将会作用在url地址中。}}}},

Nginx代理

  1. 服务端设置Nginx反向代理.
  2. **注意:**传参id_token在使用ningx转发代理时候会导致请求内容丢失情况。
    原因:nginx不会识别"_"这个符号,默认情况下它会忽略,所以后端没接收到,也就是说请求时候将这个id_token转发为idtoken导致的。

cors(简单请求、非简单请求,优化option请求)

@Overridepublic void doFilter(ServletRequest req, ServletResponse res, FilterChain chain) throws IOException, ServletException {req.setAttribute("org.apache.catalina.ASYNC_SUPPORTED", true);HttpServletResponse response = (HttpServletResponse) res;response.setHeader("Access-Control-Allow-Origin", ((HttpServletRequest) req).getHeader("Origin"));//解决跨域关键代码response.setHeader("Access-Control-Allow-Methods", "POST, GET, OPTIONS, DELETE,PUT");response.setHeader("Access-Control-Max-Age", "3600");response.setHeader("Access-Control-Allow-Headers", "Content-Disposition,Origin, X-Requested-With, Content-Type, Accept,Authorization,id_token");response.setHeader("Access-Control-Allow-Credentials","true");response.setHeader("Content-Security-Policy", "default-src 'self' 'unsafe-inline'; script-src 'self'; frame-ancestors 'self'; object-src 'none'");response.setHeader("X-Content-Type-Options", "nosniff");response.setHeader("X-XSS-Protection", "1; mode=block");chain.doFilter(req, res);}
  • 虽然有cors解决跨域,但是呢,cors会有一个情况,它会将请求分为简单请求和非简单请求。

简单请求:

满足以下几点是简单请求:
1、只限于get、post、head方法
2、请求头不超出以下字段(且没有其他自定义字段):
Accept
Accept-Language
Content-Language
Last-Event-ID
Content-Type:只限于三个值application/x-www-form-urlencoded、multipart/form-data、text/plain
如果不满足以上其中之一,那就是非简单请求!

非简单请求会发送一个预检请求options,用来嗅探服务端是否允许非简单请求跨域访问资源。

  • 注意:这个options请求是浏览器自己发出的!

当然这是后端需要避免这方面的设置,避免踩坑.

相关内容

热门资讯

教师专享福利!北京这些景区免票... 新京报讯 据首都教育消息,教师节将至,北京多家景区为老师们准备了专属免票福利!这份优惠合集已整理好,...
黑茶,喝的是一种境界与健康 在专门用来喝黑茶的茶具“飘逸杯”里,黑茶茶汤看起来并不像“黑茶”这个名字那样黑黢黢的一团。 玻璃器皿...
上海旅游节大巡游花车阵容抢先看... 2026上海旅游节大巡游9月12日外滩启幕,21辆全新主题花车携手21支境内外表演方队联袂登场,邀你...
原创 8... 上周门诊来了位 62 岁的张阿姨,得糖尿病快五年了,平时管嘴特别严,糖果、点心、甜饮料一概不碰,连水...
原创 餐... 2026年9月8日晚,南京浦口区泰冯路29号,墨语江南·阿婆菜餐厅户外帐篷里,灯火温润,其间还天降喜...