json跨域问题
一、跨域问题的原因:
1 浏览器的检查
2 跨域
3 XMLHttpRequest请求
二、跨域问题的解决:
1 禁止浏览器检查:
使用dos命令,在启动浏览器的时候,加一个参数:
- chrome --disable-web-security --user-data-dir=g:\temp3
2 JSONP:
JSONP是什么:JSONP是一种协议
JSONP解决跨域的时候后台代码需要改变吗:需要。
需要加一个切面:@ControllerAdvice
并且让这个类要继承AbstractJsonpResponseBodyAdvice
并且重写构造方法JsonpAdvice(){
super("callback");
}
JSONP的实现原理:
JSONP的弊端:
服务器需要改动代码
只支持GET
发送的不是XHR请求
3 请求是跨域的与隐藏跨域:
被调用方解决:
服务器端实现:
配置Filter:
- @Bean
- public FilterRegistrationBean registerFilter(){
- FilterRegistrationBean bean=new FilterRegistrationBean();
- bean.addUrlPattern("/*");
- bean.setFilter(new CrosFilter());
- }
创建一个Filter:
- public class CrosFilter implements Filter{
- @Override
- public void init(FilterConfig filterConfig) throws ServletException{
- }
- @Override
- public void doFilter(ServletRequest request,ServletResponse response,FilterChain filterChain)throws IOException, ServletException{
- HttpServletResponse res=(HttpServletResponse)response;
- res.addHeader("Access-Control-Allow-Origin","http://localhost:8081");
- res.addHeader("Access-Control-Allow-Methods","GET");
- res.addHeader("Access-Control-Allow-Headers","Content-Type");
- filterChain.doFilter(request,response);
- }
- }
此处的res.addHeader("Access-Control-Allow-Origin","*");可以使用*来表示所有的域,方法也可以使用*来表示所有的方法。
简单请求和非简单请求:
工作中比较常见的【简单请求】:
方法为:GET HEAD POST
请求header里面:无自定义头、Content-Type为以下几种:
text/plain
multipart/form-data
application/x-www-form-urlencoded
工作中比较常见的【非简单请求】:
put,delete方法的ajax请求
发送json格式的ajax请求
带自定义头的ajax请求
OPTIONS预检命令:
OPTIONS预检命令缓存:
res.addHeader(“Access-Control-Max-Age”,”3600”);//表示在一小时内缓存这个OPTIONS信息,不用每次请求都请求两次。
带Cookie的跨域问题:
Origin必须是全匹配,不能使用*,必须指定域名;并且需要在Filter里面增加:
res.addHeader(“Access-Control-Allow-Credentials”,”true”);
带自定义头的跨域问题:
被调用方-Nginx解决方案:
1 配置虚拟文件vhost:在nginx的目录中创建一个文件夹,命名为vhost,并在nginx的配置文件中的最后一行中加入以下代码:include vhost/*.conf,将vhost中的.conf文件加载进来。
2 在vhost文件夹下新建一个文件b.com.conf,使用nginx的语法,在该文件中加入以下内容:
- server{
- listen 80; //监听的端口
- server_name b.com;
- location /{
- proxy_pass http://localhost:8080/;
- }
- }
此时访问b.com便可以代替之前的localhost:8080进行访问。
3 继续在以上文件中添加:
- location /{
- proxy_pass http://localhost:8080/;
- add_header Access-Control-Allow-Methods *;
- add_header Access-Control-Max-Age 3600;
- add_header Access-Control-Allow-Credentials true;
- add_header Access-Control-Allow-Origin $http_origin;
- add_header Access-Control-Allow-Headers
- $http_access_control_request_headers;
- if ($request_method=OPTIONS){
- return 200;
- }
- }
Apache配置:
1 打开apache根目录下的conf文件夹下的httpd.conf文件,并搜索vhost,解开LoadModule vhost_alias_module modules/mod_vhost_alias.so
2 继续搜索vhost,解开Include conf/extra/httpd-vhosts.conf
3 打开conf文件夹下的extra文件夹下的httpd-vhosts.conf
4 增加一个虚拟主机,复制一份,并且修改为以下内容:
- <VirtualHost *:80>
- ServerName b.com
- ErrorLog "logs/b.com-error.log"
- CustomLog "logs/b.com-access.log" common
- ProxyPass / http://localhost:8080/
- </VirtualHost>
5 在httpd.conf文件中解开proxy模块:LoadModule proxy_module modules/mod_proxy.so (140行)
6 在httpd.conf文件中解开proxy http模块:LoadModule proxy_http_module modules/mod_proxy_http.so
7 进入apache的bin目录,双击httpd.exe文件,启动apache。
8 在httpd-vhosts.conf文件中增加响应头:
- <VirtualHost *:80>
- ServerName b.com
- ErrorLog "logs/b.com-error.log"
- CustomLog "logs/b.com-access.log" common
- ProxyPass / http://localhost:8080/
- #把请求头的origin值返回到Access-Control-Allow-Origin字段
- Header always set Access-Control-Allow-Origin "expr=%
- {req:origin}"
- #把请求头的Access-Control-Request-Headers值返回到Access-
- Control-Allow-Headers字段
- Header always set Access-Control-Allow-Headers "expr=%
- {req:Access-Control-Request-Headers}"
- Header always set Access-Control-Allow-Methods "*"
- Header always set Access-Control-Max-Age "3600"
- Header always set Access-Control-Allow-Credentials "true"
- #处理预检命令OPTIONS,直接返回204
- RewriteEngine On
- RewriteCond %{REQUEST_METHOD} OPTIONS
- RewriteRule ^(.*)$ "/"[R=204,L]
- </VirtualHost>
9 在httpd.conf文件中,解开headers模块:LoadModule headers_module modules/mod_headers.so
10 在httpd.conf文件中,打开rewrite模块:LoadModule rewrite_module modules/mod_rewrite.so
Spring框架的跨域解决:
在控制器中使用@CrossOrigin注解
调用方解决-隐藏跨域:
1 在hosts文件中,增加一个虚拟域名:127.0.0.1 b.com a.com
2 在nginx的vhosts文件夹中新建一个a.com.conf,打开:
- server{
- listen 80;
- server_name a.com;
- l ocation /{
- proxy_pass http://localhost:8081/;
- }
- location /ajaxserver{
- proxy_pass http://localhost:8080/test/;
- }
- }
json跨域问题的更多相关文章
- json跨域原理及解决方法
这一篇文章呢,主要是之前一直听别人讲json跨域跨域,但是还是一头雾水,只知其一,于是一怒之下,翻阅各种资料,如果有不正确的地方,劳烦指正一下^_^ 首先,先了解浏览器有一个很重要安全性限制,即为同源 ...
- Ajax跨域、Json跨域、Socket跨域和Canvas跨域等同源策略限制的解决方法
同源是指同样的协议.域名.port,三者都同样才属于同域.不符合上述定义的请求,则称为跨域. 相信每一个开发者都曾遇到过跨域请求的情况,尽管情况不一样,但问题的本质都能够归为浏览器出于安全考虑下的同源 ...
- JSON跨域读取那点事(JSONP跨域访问)
最近在码一个小项目,需要远程读取json.因为需求很少,如果引用jquery使用其getjson方法就显得很浪费嘛= = 这篇文章很详细的解释了JSON跨域读取的前世今生,把原理讲得很透彻.特此分享. ...
- Json跨域登录问题的之Access-Control-Allow-Origin 站点跨域请求的问题
跨域调用json问题 闲暇之时,做了一个博客站点,站点发布网络之后程序功能完成,最后发现了一个跨域的问题,比如我使用abc.com打开系统,一切正常,后台没有任何文件请求报错问题,然后我又使用了www ...
- JSON跨域请求
原理:首先客户机会注册一个callback,在发送跨域请求之前,会在url后附带注册的callback参数(如:callback1982342322),随后服务器拿到了callback参数,获取数据后 ...
- Json跨域请求数-Jquery Ajax请求
同步请求,async(是否异步) //同步请求,等待并接收返回的结果 var result = $.ajax({ type: "GET", url: address, async: ...
- JSON跨域解决方案收集
最近面试问的挺多的一个问题,就是JavaScript的跨域问题.在这里,对跨域的一些方法做个总结.由于浏览器的同源策略,不同域名.不同端口.不同协议都会构成跨域:但在实际的业务中,很多场景需要进行跨域 ...
- JSON跨域问题总结
一.跨域问题的原因: 1 浏览器的检查 2 跨域 3 XMLHttpRequest请求二.跨域问题的解决: 1 禁止浏览器检查:使用dos命令,在启动浏览器的时候,加一个参数:chrome --dis ...
- vue项目打包 部署nginx服务器 访问远程接口 本地json 跨域问题
本文建立在你已经在windows7上已经配好了nginx的前提下进行!!! 如果没有请移步至:https://www.cnblogs.com/jack1208-rose0203/p/5739765.h ...
随机推荐
- 大咖分享 | 一文解锁首届云创大会干货——下篇(文末附演讲ppt文件免费下载)
本文承接上一篇:大咖分享 | 一文解锁首届云创大会干货--上篇(文末附演讲ppt文件免费下载),第一届云创大会留下干货太多,这里追加下篇,同样,文末提供大咖们的干货分享,点击附件可免费下载. ...
- RPC 简单小试
由于经常被抓取文章内容,在此附上博客文章网址:,偶尔会更新某些出错的数据或文字,建议到我博客地址 : --> 点击这里 RPC是指远程过程调用,也就是说两台服务器A,B,一个应用部署在A服务器 ...
- 【ocp-12c】最新Oracle OCP-071考试题库(45题)
45.(9-16)choose the best answer: View the Exhibit and examine the data in the EMPLOYEES table. You w ...
- docker-ce的安装以及卸载
注意:以下命令无特殊说明外均在root用户下执行 一.Docker CE的安装 1. 首先,卸载老旧的docker. yum remove docker \ docker-client \ docke ...
- python基础知识梳理-----4基本数据类型,list ,tuple 操作 ,增删该查,以及其他功能函数
一:列表的增加 1: append() lis = ['张三','李四','王二码子','李鹏智障'] lis.append('赵武') # 这种加法是放在最后 print(lis) 输出 ...
- 集合之六:Map接口
Map接口概述 Map接口中的集合和Collection接口中的集合在存储数据的格式上有很大的不同,Map接口下的内容是以<K , V> ,键值对的形式存储的,我们查询API,Map接口的 ...
- P3348 [ZJOI2016]大森林(Link-cut-tree)
传送门 题解 题面大意: \(0.\)区间加节点 \(1.\)区间换根 \(2.\)单点询问距离 如果没有\(1\)操作,因为区间加节点都是加在下面,所以我们可以直接把\(n\)棵树压成一棵树,直接询 ...
- HDU - 6133 启发式合并
题意:给出一棵树共\(n\)个顶点,每个顶点有一个权值\(val_i\),你需要对每个节点统计一个最优解 每个节点的解按照一定规则产生:取出该节点的子树下所有的顶点,把顶点任意排序成一个序列,设为\( ...
- (三)Audio子系统之AudioRecord.startRecording
在上一篇文章<(二)Audio子系统之new AudioRecord()>中已经介绍了Audio系统如何创建AudioRecord对象以及输入流,并创建了RecordThread线程,接下 ...
- 通过MSI解压缩Cab文件
迁移自我的Github 如果只是想做类似解压缩的操作,那么可以使用如下命令行 C:\Windows\System32\expand.exe <cab file path> -F:* < ...