解决Vue跨域的问题

发布日期: 2020-03-08 10:41:30 作者: Stephen 评论: 0

如果你的前端应用和后端 API 服务器没有运行在同一个主机上,你需要在开发环境下将 API 请求代理到 API 服务器。这个问题可以通过 vue.config.js 中的 devServer.proxy 选项来配置。

vue 请求后端,涉及到跨域问题,我后端用的是 swoft 框架,监听18306端口,前端 vue 监听8080端口。

swoft 中新增一个跨域中间件:

<?php declare(strict_types=1);

namespace App\Http\Middleware;

use Psr\Http\Message\ResponseInterface;
use Psr\Http\Message\ServerRequestInterface;
use Psr\Http\Server\RequestHandlerInterface;
use Swoft\Bean\Annotation\Mapping\Bean;
use Swoft\Context\Context;
use Swoft\Http\Server\Contract\MiddlewareInterface;

/**
 * @Bean()
 */
class CorsMiddleware implements MiddlewareInterface
{
    /**
     * Process an incoming server request.
     * @param ServerRequestInterface $request
     * @param RequestHandlerInterface $handler
     * @return ResponseInterface
     * @inheritdoc
     */
    public function process(ServerRequestInterface $request, RequestHandlerInterface $handler): ResponseInterface
    {
        if ('OPTIONS' === $request->getMethod()) {
            $response = Context::mustGet()->getResponse();
            return $this->configResponse($response);
        }
        $response = $handler->handle($request);
        return $this->configResponse($response);
    }

    private function configResponse(ResponseInterface $response)
    {
        return $response
            ->withHeader('Access-Control-Allow-Origin', '*')
            ->withHeader('Access-Control-Allow-Headers', 'X-Requested-With, Content-Type, Accept, Origin, Authorization')
            ->withHeader('Access-Control-Allow-Credentials', true)
            ->withHeader('Access-Control-Allow-Methods', 'GET, POST, PUT, DELETE, PATCH, OPTIONS');
    }
}

注册全局中间件,配置文件: app/bean.php

'httpDispatcher'    => [
        // Add global http middleware
        'middlewares'      => [
            \App\Http\Middleware\CorsMiddleware::class
        ],
],

vue 设置代理,配置文件: vue.config.js

module.exports = {
  devServer: {
    proxy: {
      '/api': {
        target: 'http://127.0.0.1:18306',
        // ws: true,
        changeOrigin: true
      }
    }
  }
}

axios 请求:

this.$axios.post('api/user/login', values).then(res => {
        console.log(res)
})

结果报了一个跨域错误:

Proxy error: Could not proxy request

查询了官方文档,也在网上查询了很久,始终没有答案,最后发现,这是犯了一个低级的错误,我的环境是在 docker 下,docker 下容器之间通信,需要使用容器分配的虚拟ip地址,然后修改 vue.config.js 配置文件:

module.exports = {
  devServer: {
    proxy: {
      '/api': {
        target: 'http://172.17.0.3:18306',
        // ws: true,
        changeOrigin: true
      }
    }
  }
}

最后成功了:

快来抢沙发