跨域处理

php

路由处理跨域

Route::group('test', function () {
    Route::get('/', 'api.test.Test/index');

})->allowCrossDomain([
    'Access-Control-Allow-Origin' => '*',
    'Access-Control-Allow-Credentials' => 'true',
    'Access-Control-Max-Age' => 1800,
    'Access-Control-Allow-Headers' => 'Authorization, Content-Type, If-Match, If-Modified-Since, If-None-Match, If-Unmodified-Since, X-CSRF-TOKEN, X-Requested-With,XX-Device-Type,XX-Api-Version,XX-App-Version,XX-Token',
    'Access-Control-Allow-Methods' => 'GET,POST,OPTIONS',
])
;

返回结果中增加header

如果返回结果是使用一下两种方式，可以通过设置header参数的方式解决跨域问题

$header = [
                'Access-Control-Allow-Origin' => '*',
                'Access-Control-Allow-Credentials' => 'true',
                'Access-Control-Max-Age' => 1800,
                'Access-Control-Allow-Headers' => 'Authorization, Content-Type, If-Match, If-Modified-Since, If-None-Match, If-Unmodified-Since, X-CSRF-TOKEN, X-Requested-With',
                'Access-Control-Allow-Methods' => 'GET,POST,OPTIONS',
 ];
$response = Response::create($result, $type, $code)->header($header);
throw new HttpResponseException($response);

或者

        $header = [
                'Access-Control-Allow-Origin' => '*',
                'Access-Control-Allow-Credentials' => 'true',
                'Access-Control-Max-Age' => 1800,
                'Access-Control-Allow-Headers' => 'Authorization, Content-Type, If-Match, If-Modified-Since, If-None-Match, If-Unmodified-Since, X-CSRF-TOKEN, X-Requested-With',
                'Access-Control-Allow-Methods' => 'GET,POST,OPTIONS',
            ];
json(['code' => $code, 'msg' => $msg, 'time' => time(), 'data' => null], $statuscode,$header);

在入口文件index.php中设置

header('Access-Control-Allow-Origin:*');
header('Access-Control-Allow-Methods:GET,POST,OPTIONS');    //表示只允许POST请求
header('Access-Control-Allow-Headers:Authorization, Content-Type, If-Match, If-Modified-Since, If-None-Match, If-Unmodified-Since, X-CSRF-TOKEN, X-Requested-With,XX-Device-Type,XX-Api-Version,XX-App-Version,XX-Token');

nginx

location / {
  add_header Access-Control-Allow-Origin *;
    add_header Access-Control-Allow-Methods 'GET, POST, OPTIONS';
    add_header Access-Control-Allow-Headers 'Authorization, Content-Type, If-Match, If-Modified-Since, If-None-Match, If-Unmodified-Since, X-CSRF-TOKEN, X-Requested-With,XX-Device-Type,XX-Api-Version,XX-App-Version,XX-Token';
  if ($request_method = 'OPTIONS') {
        return 204;
    }
	if (!-e $request_filename){
		rewrite  ^(.*)$  /index.php?s=$1  last;   break;
	}
}

vue

在dev环境下可以使用代理来解决跨域问题

在vue.config.js文件中

devServer: {
  port: port,
  open: true, // 是否自动打开浏览器
  overlay: {
    warnings: false,
    errors: true
  },
  headers: {
    'Access-Control-Allow-Origin': '*', // 允许所有域名访问
    'Access-Control-Allow-Credentials': 'true' // 是否允许后续请求携带认证信息（cookies）,该值只能是true,否则不返回
  },
  proxy: { // 代理
    '/dev': {
      target: '测试域名', // 后台端口地址
      changeOrigin: true, // 将基于名称的虚拟托管网站的选项，如果不配置，请求会报404  如果接口跨域，需要进行这个参数配置
      ws: true, // true / false，是否代理websockets
      secure: false, // 如果是https接口，需要配置这个参数
      pathRewrite: {
        '^/dev': '' // pathRewrite是使用proxy进行代理时，对请求路径进行重定向以匹配到正确的请求地址
      }
    },
    '/pro': {
      target: '正式域名', // 后台端口地址
      changeOrigin: true, // 将基于名称的虚拟托管网站的选项，如果不配置，请求会报404  如果接口跨域，需要进行这个参数配置
      ws: true, // true / false，是否代理websockets
      secure: false, // 如果是https接口，需要配置这个参数
      pathRewrite: {
        '^/pro': '' // pathRewrite是使用proxy进行代理时，对请求路径进行重定向以匹配到正确的请求地址
      }
    }
  }
}

然后在 .env.development 文件设置