ajax跨域解决方案总结

ajax跨域解决方案总结

前端开发中经常会碰到各种跨域问题,在此做一总结。
实验代码: https://github.com/GerryLon/cors


什么是跨域?

先来讲讲什么是跨域?

  • XMLHttpRequest同源策略:禁止使用XHR对象向不同源的服务器地址发起HTTP请求。
  • DOM同源策略:禁止对不同源页面DOM进行操作。这里主要场景是iframe跨域的情况,不同域名的iframe是限制互相访问的。

只要协议主机名端口任意一个不同都认为是不同源的,此时相互调用就会造成跨域。

为什么有跨域限制?

那么为什么设计之初不允许跨域操作呢? 其实也很简单,这是因为安全问题。
暂时不作详解, 后续补充.

为什么我们要进行跨域操作?

既然跨域有问题, 我们都在一个域名下调用不就行了吗?
话说我觉得这想法真是一点都没错。 可是啊, 可是,美好的东西好像都要有个可是。
实际中我们经常有这样的需要,A域名下要调用B域名下的接口,然而有可能B域名还不是我们自己公司的,不能随便改。
就算自己公司有多个域名,也经常存在着跨域的API调用,可能企业是为了有的服务单独部署, 功能单一强大稳定一些。

总之,我们就是有跨域操作的需求!

下面对于最常见的跨域现象(ajax调用)做实验, 解析并给出相应的解决方法.

实验准备

  • 现代浏览器一枚, 方便查看错误信息

  • 本地配置一些host(将如下内容添加到hosts文件最后):
    127.0.0.1 a.test.com
    127.0.0.1 b.test.com

  • 安装nodejs, npm, http-server(npm包, 全局安装最方便, 本地启动一个http服务用)等

  • git clone https://github.com/GerryLon/cors.git
    或者直接下载zip包

  • 进入到cors工程主目录, 执行:

    npm install
    node server.js
    http-server
    
  • 然后在浏览器中打开 http://a.test.com:8080

实验现象

cors仓库下的img目录有一些测试时的截图
自己也可以打开页面和控制台观察

实验分析

接口所在主机为a.test.com, 以下简称为A, 请求的域名为b.test.com, 以下简称为B, 且端口不一致.
已经构成跨域.
公用代码:

var baseUrl = 'http://b.test.com:8900/api'; // 接口所在服务器
  • 用例1: A直接调B的接口

    // Client
    $.ajax({
      url: baseUrl + '/get1'
    });
    
    // Server
    response.end('get1 success');
    

    控制台报错:

    Failed to load http://b.test.com:8900/api/get1: No ‘Access-Control-Allow-Origin’ header is present on the requested resource. Origin ‘http://a.test.com:8080’ is therefore not allowed access.

    这是最常见的情况, 相信做web开发的都遇到过.
    既然说Access-Control-Allow-Origin没有, 那我们加上如何?

  • 用例2: 同用例1, 不过服务端代码有改:

    // Client
    $.ajax({
      url: baseUrl + '/get1'
    });
    
    // Server
    response.setHeader('Access-Control-Allow-Origin', '*');
    response.end('get2 success');
    

    加上这个头就好了, 截图如下:

    不过有时被调用方不是由我们控制的, 比如我们调用别人家的接口, 这种改服务端的方法就不行了, 那么我们就改客户端代码, 也就是常说的JSONP, 见下面的

  • 用例3: JSONP方式跨域

    JSONP的原理就是利用

你可能感兴趣的:(JavaScript,Nodejs)