2019-10-16 记录iview-admin 跨域问题解决失败

今天尝试iview-admin前端解决本地测试跨域问题,查了很多资料都写要在vue.config.js中设置devServer代理,但是我以如下方式设置代理后,将本地开发环境的baseUrl设置为空后,并不会向代理地址发送请求,而仍向本地iview-admin运行的地址发送请求,各种尝试后还是没有解决。

devServer: {
    port: port,
    open: true,
    proxy: {
      '/api': {
        target: 'http://test.com:8082/api',
        changeOrigin: true
      }
    }
  }
devServer: {
    port: port,
    open: true,
    proxy: 'http://test.com:8082/api/'
  },

后改用后台解决跨域问题,后台使用的是php框架laravrel
通过创建中间件,将本地地址加入到允许访问的列表中,即可不配置代理直接访问数据接口。步骤如下:
通过命令php artisan make:middleware EnableCrossRequestMiddleware创建一个名为EnableCrossRequestMiddleware.php的中间件,创建的中间件在App\Http\Middleware文件夹下,将haddle函数改为如下:

public function handle($request, Closure $next)
    {
        $response = $next($request);
        $origin = $request->server('HTTP_ORIGIN') ? $request->server('HTTP_ORIGIN') : '';
        $allow_origin = [
            'http://127.0.0.1:8080',//允许访问
            'http://localhost:8081',
            'http://192.168.0.119:8081'
        ];
        if (in_array($origin, $allow_origin)) {
            $response->header('Access-Control-Allow-Origin', $origin);
            $response->header('Access-Control-Allow-Headers', 'Origin, Content-Type, Cookie, X-CSRF-TOKEN, Accept, Authorization, X-XSRF-TOKEN');
            $response->header('Access-Control-Expose-Headers', 'Authorization, authenticated');
            $response->header('Access-Control-Allow-Methods', 'GET, POST, PATCH, PUT, OPTIONS');
            $response->header('Access-Control-Allow-Credentials', 'true');
            $response->header('Access-Control-Expose-Headers', 'Authorization');
        }
        return $response;
    }

其中$allow_origin即为允许访问的列表,将本地iview-admin运行地址加入数组之后,再在内核文件App\Http\Kernel.php中注册该中间件,即可正常访问数据接口。

protected  $middleware  =  [
        // more
       App\\Http\\Middleware\\EnableCrossRequestMiddleware::class,
];

你可能感兴趣的:(2019-10-16 记录iview-admin 跨域问题解决失败)