跨域原理及解决
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请求是浏览器自己发出的!

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

相关内容

热门资讯

摸鱼、钓虾、吃瓜、赏荷…初夏时... 这个周末,一场场充满野趣的“田园嘉年华”在沪郊金山多个农场上演,吸引众多市民带着孩子下乡来,赛跑、吃...
原创 戚... 5月28日,北京环球影城迎来了一对温暖的家庭画面:戚薇和李承铉携三岁半的儿子Seven现身游玩。现场...
滹沱河畔 遇见“诗和远方” 图为市民在滹沱河畔休闲娱乐。 初夏五月,惠风和畅。徜徉在石家庄滹沱河生态区(城区段),澄澈河水蜿蜒...
在迪士尼排队两小时,我才看清V... 文丨沈理 在网上看到一则新闻: 上海迪士尼,创极速光轮排队区。一个父亲牵着七八岁的儿子,已经在烈日...
重庆文旅喊你去吃火锅、观山水、... 本网讯(草原云·正北方网记者 马丽侠)火锅、机车、文创、演艺……5月28日下午,重庆市文化和旅游发展...