为什么出现跨域问题?
因为前端请求不满足浏览器的同源策略(same-origin policy)。
什么是同源策略?
同源策略1995年由 Netscape 公司引入浏览器。目前,所有浏览器都实行这个策略。
最初,它的含义是指,A网页设置的 Cookie,B网页不能打开,除非这两个网页"同源"。所谓"同源"指的是"三个相同"。
协议相同
域名相同
端口相同
当协议、子域名、主域名、端口号中任意一个不相同时,都算作不同源。不同源之间相互请求资源,就算作“跨域”。跨域并不是请求发不出去,请求能发出去,服务端能收到请求并正常返回结果,只是结果被浏览器拦截了。
同源策略的目的?
同源政策的目的,是为了保证用户信息的安全,防止恶意的网站窃取数据。
设想这样一种情况:A网站是一家银行,用户登录以后,又去浏览其他网站。如果其他网站可以读取A网站的 Cookie,会发生什么?
很显然,如果 Cookie 包含隐私(比如存款总额),这些信息就会泄漏。更可怕的是,Cookie 往往用来保存用户的登录状态,如果用户没有退出登录,其他网站就可以冒充用户,为所欲为。
解决方案:
CORS是跨源资源分享(Cross-Origin Resource Sharing)的缩写。它是W3C标准,是跨源AJAX请求的根本解决方法。相比JSONP只能发GET请求,CORS允许任何类型的请求。
解决报错:The 'Access-Control-Allow-Origin' header contains multiple values '*, *', but only one is allowed
Access-Control-Allow-Origin出现了重复设置,一般是ngxin配置文件、服务端代码cors、前端代码几个地方重复设置了,将重复的全部删除,保留一处即可。
参考:
1.阮一峰浏览器同源政策及其规避方法:http://www.ruanyifeng.com/blog/2016/04/same-origin-policy.html
2.阮一峰
跨域资源共享 CORS 详解: