ICode9

精准搜索请尝试: 精确搜索
首页 > 系统相关> 文章详细

跨域问题详解(1-跨域解释以及解决办法;2-整合nginx重复配置跨域导致 ‘Access-Control-Allow-Origin‘ contains multiple values)

2022-03-28 00:34:22  阅读:467  来源: 互联网

标签:Control Origin multiple 跨域 Access header Allow


问题一:No ‘Access-Control-Allow-Origin’ header is present on the requested resource.

浏览器的策略本质:处于安全考虑,一个域下面的JS,没有经过允许是不能读取另外一个域的内容;
ajax请求会通过跨域请求拿到响应数据这样是不安全。
但是浏览器不阻止你向另外一个域发送请求,对于form表单提交来说,原先页面无法获取新页面的内容;
浏览器的安全策略限制的是js脚本,并不限制src,form表单提交之类的请求。就是说form表单提交不存在安全问题,ajax提交跨域存在安全问题。

跨域:在当前页面想要访问其他页面,主要端口、ip、协议有一个不一样就会被定义为跨域;

例如:
在前后端分离的项目中,一个熟悉的场景:前端页面发送ajax请求给后端,后端返回json数据,前端拿到返回的数据进行响应的页面跳转以及数据的展示;
前端:http://front.smile.com:5500/login.html;页面发送ajax请求,给后端http://backend.smile.com:8080/user/login;跨域产生的原因此处就是原地址和目的地址端口和域名不一致;
第一次跨域产生:No ‘Access-Control-Allow-Origin’ header is present on the requested resource.
在这里插入图片描述
跨域解决办法一:目的服务器进行跨域允许配置;

@Configuration
public class ConfigurationCors implements WebMvcConfigurer {

    @Override
    public void addCorsMappings(CorsRegistry registry) {
        registry.addMapping("/**")                                              //项目中的所有/getTitle/**支持跨域
                .allowedOriginPatterns("*")//所有地址都可以访问,也可以配置具体地址
                .allowCredentials(true)
                .allowedMethods("*")//"GET", "HEAD", "POST", "PUT", "DELETE", "OPTIONS"
                .maxAge(3600);// 跨域允许时间
    }
}

问题二:The ‘Access-Control-Allow-Origin’ header contains multiple values ‘http://front.smile.com:5500, *’, but only one is allowed.

背景:下图简要描述非正式nginx服务器来搭建https服务场景,前端发送请求给后端,由于是https协议,首先nginx443端口会监听到这个请求,然后帮助去找到目标代理服务器;
在这里插入图片描述
如问题一所示,这边是会出现跨域请求的,然后解决方法可以选择第一种在目的服务器上面设置,也可以在nginx服务器上面进行配置;
跨域解决办法二:

location / {  
    add_header Access-Control-Allow-Origin *;
    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 ($request_method = 'OPTIONS') {
        return 204;
    }
} 

这边我一开始没有将目的服务器的配置设置关闭,导致nginx和目的服务器都设置了跨域允许,导致Access-Control-Allow-Origin值重复;The ‘Access-Control-Allow-Origin’ header contains multiple values ‘http://front.smile.com:5500, *’, but only one is allowed.可以在响应头中看到确实重复;
在这里插入图片描述
在这里插入图片描述

解决办法:两种方式选择一个即可;


 

少年的志向,不应该是房子,他们应该伏案疾书,或为心中的梦想而挥洒汗水,畅想着自己未来光明的人生,少年的梦想,也不应该是生活,他们应该想要集齐七颗龙珠,或者幻想着拥有一颗皮卡丘。欢迎关注微信公众号<彭晓琪>,Java学习交流qq群(百人群):608827101

标签:Control,Origin,multiple,跨域,Access,header,Allow
来源: https://www.cnblogs.com/java-pxq/p/16065317.html

本站声明: 1. iCode9 技术分享网(下文简称本站)提供的所有内容,仅供技术学习、探讨和分享;
2. 关于本站的所有留言、评论、转载及引用,纯属内容发起人的个人观点,与本站观点和立场无关;
3. 关于本站的所有言论和文字,纯属内容发起人的个人观点,与本站观点和立场无关;
4. 本站文章均是网友提供,不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属;如您发现该文章侵犯了您的权益,可联系我们第一时间进行删除;
5. 本站为非盈利性的个人网站,所有内容不会用来进行牟利,也不会利用任何形式的广告来间接获益,纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

专注分享技术,共同学习,共同进步。侵权联系[81616952@qq.com]

Copyright (C)ICode9.com, All Rights Reserved.

ICode9版权所有