vue + tp5 前后端分离项目中的跨域问题

通常这个问题是不会出现的， 我们在使用vue-cli 打包的时候， 就把打包的后的线上项目文件放在 tp的 public/（dist）的目录下面就好了， 不一定非要是dist 目录，自已打包时打定的， 以上的方式就不会出现 跨域的问题

我现在要说的是另一种方式， 前端，后端各有自已的 域名，如前端为 http://front.XXXX.com 后端的域名是 http://backend.XXXX.com
前端会在页面中使用 axios 来请求 后端的地址， 这一看， 妥妥的跨域了

我在 fastadmin 找到的 api 接口的解决跨域问题的代码， 可以参考一下， 在fastadmin 如果请求中 是以 /api 开头，就会走这段代码来解决跨域问题

 function check_cors_request()
    {
        if (isset($_SERVER['HTTP_ORIGIN']) && $_SERVER['HTTP_ORIGIN']) {
            $info = parse_url($_SERVER['HTTP_ORIGIN']);
            $domainArr = explode(',', config('fastadmin.cors_request_domain'));
            $domainArr[] = request()->host(true);
            if (in_array("*", $domainArr) || in_array($_SERVER['HTTP_ORIGIN'], $domainArr) || (isset($info['host']) && in_array($info['host'], $domainArr))) {
                header("Access-Control-Allow-Origin: " . $_SERVER['HTTP_ORIGIN']);
            } else {
                $response = Response::create('跨域检测无效', 'html', 403);
                throw new HttpResponseException($response);
            }

            header('Access-Control-Allow-Credentials: true');
            header('Access-Control-Max-Age: 86400');

            if ($_SERVER['REQUEST_METHOD'] == 'OPTIONS') {
                if (isset($_SERVER['HTTP_ACCESS_CONTROL_REQUEST_METHOD'])) {
                    header("Access-Control-Allow-Methods: GET, POST, PUT, DELETE, OPTIONS");
                }
                if (isset($_SERVER['HTTP_ACCESS_CONTROL_REQUEST_HEADERS'])) {
                    header("Access-Control-Allow-Headers: {$_SERVER['HTTP_ACCESS_CONTROL_REQUEST_HEADERS']}");
                }
                $response = Response::create('', 'html');
                throw new HttpResponseException($response);
            }
        }
    }

说白了， 它就是加一请求头
header(“Access-Control-Allow-Origin: *” );
header(‘Access-Control-Allow-Credentials: true’);
header(‘Access-Control-Max-Age: 86400’);

这样就解决了跨域的问题

但是我很幸运， 我遇到了另一个问题， 文件预览 上面的方法好像是解决不了
先说一下原因
我们知道 tp 的上传文件是在 public/uploads/… 的文件夹中的
我们访问的时候 是这样的 http://www.domain.com/uploads/…docx
有什么不一样吗？
上面的 路径根本没有 /api 所以也就不会走 以上的跨域解决方案， 所以， 当我的在前端要预览 站点中上传过的文件的时候， 就又出现了跨域的问题
这种情况， 访问静态文件的跨域解决办法， 我们是例用 nginx 的解决跨域方案

server
    {
        listen 80;
        server_name cont.wool.com;
        index index.html index.htm index.php default.html default.htm default.php;
        root  /home/wwwroot/coct.wool.com/public;

        include rewrite/thinkphp.conf;
        #error_page   404   /404.html;

        # Deny access to PHP files in specific directory
        #location ~ /(wp-content|uploads|wp-includes|images)/.*\.php$ { deny all; }

        include enable-php-pathinfo.conf;

		#这里就是解决方案的重点，  路由匹配到  /uploads  就进行跨域的相关配置，注意这里的 $http_origin是一个 nginx的变量， 不懂的可以百度一下，

        location /uploads {
			add_header 'Access-Control-Allow-Origin' $http_origin;
			add_header 'Access-Control-Allow-Credentials' 'true';
			add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS';
			add_header 'Access-Control-Allow-Headers' 'DNT,web-token,app-token,Authorization,Accept,Origin,Keep-Alive,User-Agent,X-Mx-ReqToken,X-Data-Type,X-Auth-Token,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Range';
			add_header 'Access-Control-Expose-Headers' 'Content-Length,Content-Range';
			if ($request_method = 'OPTIONS') {
				add_header 'Access-Control-Max-Age' 1728000;
				add_header 'Content-Type' 'text/plain; charset=utf-8';
				add_header 'Content-Length' 0;
				return 204;
			}
	}





        location ~ .*\.(gif|jpg|jpeg|png|bmp|swf)$
        {
            expires      30d;
        }

        location ~ .*\.(js|css)?$
        {
            expires      12h;
        }

        location ~ /.well-known {
            allow all;
        }

        location ~ /\.
        {
            deny all;
        }

        access_log  /home/wwwlogs/contract.wukool.com.log;
    }

		add_header 'Access-Control-Allow-Origin' $http_origin;
		add_header 'Access-Control-Allow-Credentials' 'true';
		add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS';
		add_header 'Access-Control-Allow-Headers' 'DNT,web-token,app-token,Authorization,Accept,Origin,Keep-Alive,User-Agent,X-Mx-ReqToken,X-Data-Type,X-Auth-Token,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Range';
		add_header 'Access-Control-Expose-Headers' 'Content-Length,Content-Range';

这里就是重点，完成以上操作， 预览文件就没有跨域的报错了