一文了解跨域问题

什么是跨域

不同域名之间的资源访问

解决方法

JSONP,CROS

JSONP

• 原理：html带src属性的标签都可以跨域引用，jsonp通过写入和读取src文件内容来实现跨域。

• 用法

前端：

$.ajax({
      type: 'GET',
      url: captchaUrl,
      dataType:'jsonp',
      jsonp:'jsoncallback',
      success: function(res){
            $('#captcha').attr('src', res.url);
      }
    });

后端：

$jsoncallback = Yii::$app->request->get('jsoncallback', '');
if ($jsoncallback) {
    Yii::$app->response->format = Response::FORMAT_JSONP;
    $result = ['callback' => $jsoncallback, 'data' => $result];
}

• 优点：

1. 支持较旧的浏览器

2. 可以向不支持CORS的网站请求数据

• 缺点：

只支持get请求，导致传输文本长度受限

CROS

• 原理：请求header添加Access-Control-Allow-Origin相关属性

• 用法：

前端

$.ajax({
      type:"POST",
      url: url,
      data: data,
      xhrFields: {
        withCredentials: true  //需要写入cookie时设置为true，后端也要相应设置
      },
      crossDomain: true,  //允许跨域
      success:function(res){
        success(res);
      },
      error: function(res){
        error(res);
      }
    })

后端

设置header里的cros属性，下面是yii2的方法

public function behaviors()
{
    $behaviors = parent::behaviors();
    $behaviors["cors"] = [
        'class' => Cors::className(),
        'cors' => [
            'Origin' => ['http://www.xxxxxx.com', '  //允许的域名，设置为'*'表示全部允许 
            'Access-Control-Request-Method' => ['POST', 'GET'],  //允许的请求方式
            'Access-Control-Allow-Credentials' => true,   //需要写入cookie的时候要设置为true，前端也要相应设置
        ],
    ];
    return $behaviors;
}

写入cookie时，如果是简单请求，可能有第一次请求无法写入，第二次请求才能写入的问题，需要进一步实验。

深入原理请参考：

http://www.ruanyifeng.com/blog/2016/04/cors.html

图片的跨域问题

首先图片受到url长度限制不能使用get请求传输，所以不能使用jsonp方式跨域。

如果遇到不支持cros的浏览器要跨域图片可以使用flash方式跨域，webuploader，ueditor等都支持配置使用swf文件进行图片传输。

服务器web目录要添加一个跨域文件crossdomain.xml，内容如下：

<?xml version="1.0" encoding="UTF-8"?>
<cross-domain-policy>
<allow-access-from domain="www.xxxx.com" />
</cross-domain-policy>

简单请求和复杂请求

简单请求response直接添加跨域信息

Access-Control-Allow-Origin: http://api.xxx.com

Access-Control-Allow-Credentials: true（可选）

Access-Control-Expose-Headers: FooBar（可选）

复杂请求会有一次OPTIONS预请求，在预请求中返回：

Access-Control-Allow-Origin: http://api.xxx.com

Access-Control-Allow-Methods: GET, POST, PUT

Access-Control-Allow-Headers: X-Custom-Header

Access-Control-Allow-Credentials: true

Access-Control-Max-Age: 86400 （缓存时间单位秒，在时间内再次访问该接口就不会有options预请求了）

然后再进行正式请求，返回内容和简单请求一样

laravel框架cros跨域实现：

laravel路由区分请求方式，options预请求要单独处理。目前自己写了一个中间件实现跨域。

<?php

namespace App\Http\Middleware;

use Closure;

class Cors
{
    /**
     * Handle an incoming request.
     *
     * @param  \Illuminate\Http\Request $request
     * @param  \Closure $next
     * @return mixed
     */
    public function handle($request, Closure $next)
    {
        $response = $next($request);
        $allowOrigins = [
            'http://localhost:8080',
            'http://www.xxxxx.cn',
        ];
        $origin = $request->header('Origin');
        if (in_array($origin, $allowOrigins)) {
            if ($request->isMethod('OPTIONS')) {
                $response->header('Access-Control-Allow-Origin',$origin);
//                $response->header('Access-Control-Allow-Credentials','true');
                $response->header('Access-Control-Allow-Methods','POST, GET, PUT, DELETE');
                $response->header('Access-Control-Allow-Headers','Content-Type,Authorization');
                $response->header('Access-Control-Max-Age','86400');
            }else{
                $response->header('Access-Control-Allow-Origin', $origin);
//                $response->header('Access-Control-Allow-Credentials','true');
            }
        }
        return $response;
    }
}