解决项目跨域问题。

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',
])
;

• 在入口文件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 文件设置

VUE_APP_BASE_API='/dev'

特殊场景

---

• 网站配置了https证书，但是并没有强制使用https访问
• 采用前后端分离 php + vue
• 谷歌浏览器 (访问过https://upwqy.com)
• 在vue中配置的接口地址是http://upwqy.com

报错信息：

Response to preflight request doesn't pass access control check: Redirect is not allowed for a preflight request.

解决方案：

1、清理浏览器缓存，不让网站自动跳转到https