跨域(CORS)请求问题[No 'Access-Control-Allow-Origin' header is present on the requested resource]常见解决方案
基本概念
跨域(CORS)请求:同源策略/SOP(Same origin policy)是一种约定,由Netscape公司1995年引入浏览器,它是浏览器最核心也最基本的安全功能,如果缺少了同源策略,浏览器很容易受到XSS、CSFR等攻击。所谓同源是指"协议+域名+端口"三者相同,即便两个不同的域名指向同一个ip地址,也非同源。
浏览器和服务器实现跨域(CORS)判定的原理
问题描述
axios提示跨域 但是返回的请求是200并且有数据
问题分析
同源策略限制以下几种行为:
1.) Cookie、LocalStorage 和 IndexDB 无法读取
2.) DOM 和 Js对象无法获得
3.) AJAX 请求不能发送
常见跨域场景
1.)同一域名下的不同文件或路径,允许访问。
http://www.domain.com/a.js
http://www.domain.com/b.js
http://www.domain.com/lab/c.js
2.)同一域名下的不同端口, 不允许访问。
http://www.domain.com:8000/a.js
http://www.domain.com/b.js
3.)同一域名下的不同协议, 不允许访问。
http://www.domain.com/a.js
https://www.domain.com/b.js
4.)同一ip地址下的不同域名之间,不允许访问。
http://www.domain.com/a.js
http://192.168.4.12/b.js
5.) 不同域名之间不允许访问。
http://www.domain1.com/a.js
http://www.domain2.com/b.js
解决方案
方法一:通过在被请求的资源文件中添加 'Access-Control-Allow-Origin’
(1)如果被请求的是静态HTML文件,则需要只需要在被请求的HTML文件中加上一下标签。
<meta http-equiv="Access-Control-Allow-Origin" content="*" />
(2)如果被请求的是java接口,则可以在响应头中加上:
response.setHeader("Access-Control-Allow-Origin", "http://www.domain1.com");
(3)如果被请求的是.net接口,则可以在响应头中加上:
Response.AddHeader("Access-Control-Allow-Origin", "*");
方法二:通过jsonp请求
跨域原理: 通常为了减轻web服务器的负载,我们把js、css,img等静态资源分离到另一台独立域名的服务器上,在html页面中再通过相应的标签从不同域名下加载静态资源,而被浏览器允许,基于此原理,我们可以通过动态创建script,再请求一个带参网址实现跨域通信。
原生实现:
<script>var script = document.createElement('script');script.type = 'text/javascript';// 传参并指定回调执行函数为onBackscript.src = 'http://www.domain2.com:8080/login?user=admin&callback=onBack';document.head.appendChild(script);// 回调执行函数function onBack(res) {alert(JSON.stringify(res));}</script>
jQuery实现:
$.ajax({url: 'http://www.domain2.com:8080/login',type: 'get',dataType: 'jsonp', // 请求方式为jsonpcrossDomain: true,success: function(data) {},data: {}
});
方法三:通过设置代理
跨域原理: 同源策略是浏览器的安全策略,不是HTTP协议的一部分。服务器端调用HTTP接口只是使用HTTP协议,不会执行JS脚本,不需要同源策略,也就不存在跨越问题。
以下提供java/.net跨域文件的源码,请自行发布使用。请求代理文件源码地址:
https://github.com/muziye2013/CrossDomainAccessProxy
a. 如果是.NET开发环境,请将下载的“DotNet”源码发布为网站
并将网站的物理路径,指向源码DotNet地址:
修改index.html页面中被请求的资源,在浏览器中访问index.html页面进行测试。
var testUrl="http://172.17.0.130/***/query";//修改测试服务地址
b.如果是Java开发环境,请将下载的“Java”源码放在tomcat网站下的webapps目录下,
修改index.html页面中被请求的资源,启动tomcat,在浏览器中访问index.html页面进行测试。
方法四:通过Nginx反向代理
跨域原理: 同源策略是浏览器的安全策略,不是HTTP协议的一部分。服务器端调用HTTP接口只是使用HTTP协议,不会执行JS脚本,不需要同源策略,也就不存在跨越问题。
实现思路:通过nginx配置一个代理服务器(域名与domain1相同,端口不同)做跳板机,反向代理访问domain2接口,并且可以顺便修改cookie中domain信息,方便当前域cookie写入,实现跨域登录。
nginx具体配置:
#proxy服务器
server {listen 81;server_name www.domain1.com;location / {proxy_pass http://www.domain2.com:8080; #反向代理proxy_cookie_domain www.domain2.com www.domain1.com; #修改cookie里域名index index.html index.htm;# 当用webpack-dev-server等中间件代理接口访问nignx时,此时无浏览器参与,故没有同源限制,下面的跨域配置可不启用add_header Access-Control-Allow-Origin http://www.domain1.com; #当前端只跨域不带cookie时,可为*add_header Access-Control-Allow-Credentials true;}
}
https://segmentfault.com/a/1190000011145364
方法五:Spring Boot解决方案
参考文章
https://segmentfault.com/a/1190000011145364
https://segmentfault.com/q/1010000015817945
https://blog.csdn.net/dear_little_bear/article/details/83999391
https://blog.csdn.net/zmx729618/article/details/53319383
https://blog.csdn.net/tg928600774/article/details/80325040
https://blog.csdn.net/hyt941026/article/details/82148368
https://www.jianshu.com/p/e935a8f81971
https://www.cnblogs.com/xuanmanstein/p/10574805.html
跨域(CORS)请求问题[No 'Access-Control-Allow-Origin' header is present on the requested resource]常见解决方案相关推荐
- 跨域 cors 请求两次_请求两次的故事-CORS
跨域 cors 请求两次 The story of requesting twice, allow me to explain how it all began. 请求两次的故事,让我解释一下这是如何 ...
- Vue 跨域请求报错No ‘Access-Control-Allow-Origin‘ header is present on the requested resource.
坑是一个一个踩出来的... 报错如下: Access to XMLHttpRequest at 'http://apps.eshimin.com/traffic/gjc/getArriveBase?n ...
- 解决springboot跨域问题No ‘Access-Control-Allow-Origin’ header is present on the requested resource.
文章目录 1.问题描述 2.问题产生 3.解决方案 1. 在WebMvcConfig添加(推荐使用) 2.直接采用SpringBoot的注解@CrossOrigin 1.Controller层在需要跨 ...
- js跨域访问,No 'Access-Control-Allow-Origin' header is present on the requested resource
js跨域访问提示错误:XMLHttpRequest cannot load http://...... No 'Access-Control-Allow-Origin' header is prese ...
- 新版本Chrome同源策略、跨域问题处理No ‘Access-Control-Allow-Origin‘ header is present on the requested resource.
本文的方法实用于本地调试浏览器的设置,如果想要彻底解决需要使用 CORS(跨域资源共享) [ 相关文章 ] Python 使用 CORS 跨域资源共享解决 flask 服务器跨域问题.浏览器同源策略 ...
- 解决跨域问题:No ‘Access-Control-Allow-Origin‘ header is present on the requested resource.
前些天发现了一个巨牛的人工智能学习网站,通俗易懂,风趣幽默,忍不住分享一下给大家.点击跳转到教程. PS:如果遇到 这个问题 Request header field Content-Type is ...
- Vue--使用webpack解决跨域问题:No ‘Access-Control-Allow-Origin‘ header is present on the requested resource
原文网址:Vue--使用webpack解决跨域问题:No 'Access-Control-Allow-Origin' header is present on the requested resour ...
- 报错:跨域问题解决 No ‘Access-Control-Allow-Origin‘ header is present on the requested resource.
报错: Access to XMLHttpRequest at 'http://127.0.0.1:8088/user/list' from origin 'http://localhost:8080 ...
- 解决xxx by CORS policy: No ‘Access-Control-Allow-Origin‘ header is present on the requested resource问题
文章目录 问题复现 跨域现象 什么是跨域 为什么要跨域 同源策略 什么是同源策略 为何存在同源策略 解决跨域问题 其他解决跨域问题的方案 JSONP CORS 跨域资源共享 前端设置 服务器设置 反向 ...
最新文章
- ERP项目管理,哪一环才是关键节点?
- python爬取学校题库_如何使用 Python 爬虫爬取牛客网 Java 题库?
- zerodivisionerror什么意思python-Python with as的用法
- Why AG3 client 815 transport entries disabled
- 【C++】满二叉树问题
- mac编译安装apache+php+mysql开发环境
- python修改pip源脚本_修改python的pip源为国内源
- C#创建自定义配置节点
- Moscow Pre-Finals Workshop 2020 - Legilimens+Coffee Chicken Contest (XX Open Cup, Grand Prix of Nanj
- 雷达线雕的原理及功效
- Linux驱动学习--ALSA框架(二)声卡的创建--以SCO虚拟声卡为例
- swift混编调用oc编写的Xib UIView出现[Storyboard] Unknown class in Interface Builder file.问题的解决
- 人人网首页登录页面html码,仿人人网WordPress登陆注册界面
- 活在当下,谋在未来,国内外新能源汽车城市物流配送运营模式创新
- 好用的网页在线客服工具
- exchange创建邮箱组_在 Exchange Server 中创建用户邮箱
- 坚持十年博客写作,不忘初心,方得始终
- [Error] invalid operands of types ‘float‘ and ‘float‘ to binary ‘operator%‘
- 新鲜的蔬菜和水果中富含抗氧化物,可以有效延缓衰老和疾病
- Django基础九之中间件
热门文章
- SQL Server 2005与2000写法上的差别
- arcgis 统一投影下范围不同_关于Arcgis这62个常用技巧,你造吗
- p沟道mos管导通条件_通俗易懂:MOS管基本知识(快速入门)
- python网络爬虫权威指南 豆瓣_豆瓣Python大牛写的爬虫学习路线图,分享给大家!...
- java timer 线程安全_多线程之 线程安全与控制
- 服务器升级内存跟cpu之后性能更差,云服务器cpu重要还是内存重要
- java压缩对象_Java 对象指针压缩
- html下拉折叠菜单,原生Js_实现简单的下拉折叠菜单(添加弹出动画效果)
- 计算机系学生的职业生涯作文,医学生职业生涯规划的作文800字
- 十六、深入Java的数组(下篇)