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,就可以了

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