AJAX跨域 缘由&思路

跨域产生的缘由&问题

 

◆ 浏览器限制

跨域问题若是认为是服务器后台不容许前台调用的想法是错误的,缘由是浏览器出于安全的考虑,当浏览器发现请求是跨域的时候,就会校验,校验不经过则抛出跨域安全的问题.(闲的慌)

 

◆ 跨域

若是请求不是本域的,就会发生跨域. 请求包含协议、域名、端口,其中任何一个不同,浏览器就认为该请求是跨域的.

 

◆ XHR (XMLHttpRequest) 请求

若是请求(或封装)不是XHR请求,就算是跨域,浏览器也不会报错,请求方式有不少种,能够查看浏览器控制台请求窗口上请求的类型,若是是xhr,则会被校验,若是是其余的则不会校验(好比img标签上的请求)

 

解决思路

针对以上3点开始解决

1. 不让浏览器作这些校验,不限制,就不会有跨域安全问题(disable-web-security操做浏览器属性配置,没人会去干的)

2. 那咱们发出去的请求type不是xhr也能够,就算是跨域也不会报跨域问题(如: jsonp,type是script,只支持get请求,后端继承AbstractJsonpResponseBodyAdvice类,重写构造器约定便可)

3. 第一种被调用方改动,传递调用方容许信息,容许跨域访问,直接由浏览器发送请求,则直接跨域;第二种调用方改动,使用代理,请求都发向另外一个域,在代理中转url请求,浏览器认为都是同一个域名的访问,则隐藏跨域

 

关于nginx, 虚拟主机(多个域名指向同一个服务器,服务器将不一样的域名转到不一样的应用服务器)

安装好nginx,在conf目录下,在nginx.conf文件最下方添加include vhost/*.conf

而后在conf目录下新建一个名为vhost的文件夹.进入vhost文件夹,开始创建相关的应用域名配置

如下是一个例子:

server{
  listen: 80;                           ---监听端口
  server_name: tom.com;                 ---调用方,访问时候的域名,测试时候须要在本身电脑上改host文件的对应配置
  
  location /{
    proxy_pass http://localhost:8080/;  ---被调用方,全部的请求都转到这里

    add_header Access-Control-Allow-Methods *;   ---将以前控制header的信息,转移到nginx管理的方式
    add_header Access-Control-Max-Age 3600;
    add_header Access-Control-Allow-Credentials true;

    add_header Access-Control-Allow-Origin $http_origin;    ---动态获取origin
    add_header Access-Control-Allow-Headers $http_access_control_allow_headers; ---小写,-换成_

    if ($request_method = OPTIONS){   ---处理 options 预检命令,不须要再转到应用服务器,if和()之间必须带空格
       return 200;
    }
  }

  location /otherserver{                    ---再次代理,隐藏跨域
    proxy_pass http://localhost:8081/jerry;
  }
}

写完配置文件,内心没底的话,能够测试一下文件是否正确,命令: nginx.exe -t

 

关于Apache的,须要打开预留的注释掉的功能,在httpd-vhost.conf文件,对应的节点修改添加什么什么的,

下次再试试好了,本次不玩了

 

spring框架项目,只要在类上或方法上加一个注解@CrossOrigin,就能够了

----------------------------------------------------------------