一、跨域问题的原因:

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跨域问题的更多相关文章

  1. json跨域原理及解决方法

    这一篇文章呢,主要是之前一直听别人讲json跨域跨域,但是还是一头雾水,只知其一,于是一怒之下,翻阅各种资料,如果有不正确的地方,劳烦指正一下^_^ 首先,先了解浏览器有一个很重要安全性限制,即为同源 ...

  2. Ajax跨域、Json跨域、Socket跨域和Canvas跨域等同源策略限制的解决方法

    同源是指同样的协议.域名.port,三者都同样才属于同域.不符合上述定义的请求,则称为跨域. 相信每一个开发者都曾遇到过跨域请求的情况,尽管情况不一样,但问题的本质都能够归为浏览器出于安全考虑下的同源 ...

  3. JSON跨域读取那点事(JSONP跨域访问)

    最近在码一个小项目,需要远程读取json.因为需求很少,如果引用jquery使用其getjson方法就显得很浪费嘛= = 这篇文章很详细的解释了JSON跨域读取的前世今生,把原理讲得很透彻.特此分享. ...

  4. Json跨域登录问题的之Access-Control-Allow-Origin 站点跨域请求的问题

    跨域调用json问题 闲暇之时,做了一个博客站点,站点发布网络之后程序功能完成,最后发现了一个跨域的问题,比如我使用abc.com打开系统,一切正常,后台没有任何文件请求报错问题,然后我又使用了www ...

  5. JSON跨域请求

    原理:首先客户机会注册一个callback,在发送跨域请求之前,会在url后附带注册的callback参数(如:callback1982342322),随后服务器拿到了callback参数,获取数据后 ...

  6. Json跨域请求数-Jquery Ajax请求

    同步请求,async(是否异步) //同步请求,等待并接收返回的结果 var result = $.ajax({ type: "GET", url: address, async: ...

  7. JSON跨域解决方案收集

    最近面试问的挺多的一个问题,就是JavaScript的跨域问题.在这里,对跨域的一些方法做个总结.由于浏览器的同源策略,不同域名.不同端口.不同协议都会构成跨域:但在实际的业务中,很多场景需要进行跨域 ...

  8. JSON跨域问题总结

    一.跨域问题的原因: 1 浏览器的检查 2 跨域 3 XMLHttpRequest请求二.跨域问题的解决: 1 禁止浏览器检查:使用dos命令,在启动浏览器的时候,加一个参数:chrome --dis ...

  9. vue项目打包 部署nginx服务器 访问远程接口 本地json 跨域问题

    本文建立在你已经在windows7上已经配好了nginx的前提下进行!!! 如果没有请移步至:https://www.cnblogs.com/jack1208-rose0203/p/5739765.h ...

随机推荐

  1. 企业IT架构转型之道 读书笔记-1.阿里巴巴集团中台战略引发的思考

    前言 1.为什么选择看这本书 2.Supercell公司的开发模式 3.“烟囱式”系统建设模式弊端,及产生这种现象的原因 4.IT人员在企业信息中心的组织职能 一.为什么选择看这本书 多日没有更新博客 ...

  2. 写了一个Windows服务,通过C#模拟网站用户登录并爬取BUG列表查询有没有新的BUG,并提醒我

    写了一个Windows服务,通过C#模拟网站用户登录并爬取BUG列表查询有没有新的BUG,并提醒我 1.HttpUtil工具类,用于模拟用户登录以及爬取网页: using System; using ...

  3. windows 10 RelativePanel

    The new RelativePanel implements a style of layout that is defined by the relationships between its ...

  4. iOS Socket编程(一)基本概念

    1.Socket的解释 Socket翻译过来中文称为套接字, 这里我找到了一段比较官方的解释Socket是什么东西: Socket是通信的基石,是支持TCP/IP协议的网络通信的基本操作单元,包含进行 ...

  5. php 编译代码

    编译其实就是把所有的代码整合在于一个文件,减少文件包含时间,加快php解析,虽然优化后时间上提升了不多,但能优化便多多少少进行优化.下面给一个编译例子,从而引申. // 定义编译状态 define(' ...

  6. 【OCP-12c】2019年CUUG OCP 071考试题库(77题)

    77.Which two statements are true about sequences created in a single instance database? (Choose two. ...

  7. python 快速幂求斐波那契数列

    先占坑 后面再写详细的 import numpy as np def pow(n): a = np.array([[1,0],[0,1]]) b = np.array([[1,1],[1,0]]) n ...

  8. 代码审计之Catfish CMS v4.5.7后台作者权限越权两枚+存储型XSS一枚

    首先本地搭建环境,我所使用的是Windows PHPstudy集成环境.使用起来非常方便.特别是审计的时候.可以任意切换PHP版本. 本文作者:226safe Team – Poacher 0×01 ...

  9. 【bash】今天你坑队友了吗

    需求: 压缩日志并删除压缩过的文件 很日常的运维需求!!! 好,来看代码 echo 'start' quke.log rm -f quke.log echo 'delete' 不管是初级运维还是高级运 ...

  10. JSP的介绍及语法详解

    一.简介 > HTML - HTML擅长显示一个静态的网页,但是不能调用Java程序. > Servlet - Servlet擅长调用Java程序和后台进行交互,但是它不擅长显示一个完整的 ...