使用Vue.js中的axios向Laravel API发送get请求

我使用Laravel5.5创建了一个api，并在Postman中进行了测试。所以，在《邮递员》中，它工作正常，但当我尝试从前端连接它时，我得到了一些错误。我在前端使用Vue.js

这是前端使用axios发出的请求：

<script>
  import axios from 'axios';

  export default {
    data () {
      return {
        posts: {}
      }
    }, 
    created() {
      axios({
        method: 'get',
        url: 'http://localhost:8000/api/users',
        headers: {
          'Access-Control-Allow-Origin': '*',
          'Access-Control-Allow-Headers': 'Origin, Content-Type, X-Auth-Token, Authorization',
          'Access-Control-Allow-Methods': 'GET, POST, PATCH, PUT, DELETE, OPTIONS',
          'Access-Control-Allow-Credentials': true,     
          'Content-Type': 'text/html; charset=utf-8'   
        }
      }).then(response => {
          this.posts = response.data;
          console.log(this.posts[0].body);          
        }).catch(error => {
          console.error(error.message);          
        });
    }
  }
</script>

Route::get('users', 'UserController@index');

<?php namespace App\Http\Middleware;

use Closure;

class CORS {

    /**
     * Handle an incoming request.
     *
     * @param  \Illuminate\Http\Request  $request
     * @param  \Closure  $next
     * @return mixed
     */
    public function handle($request, Closure $next)
    {

        header("Access-Control-Allow-Origin: *");

        // ALLOW OPTIONS METHOD
        $headers = [
            'Access-Control-Allow-Methods'=> 'POST, GET, OPTIONS, PUT, DELETE',
            'Access-Control-Allow-Headers'=> 'Content-Type, X-Auth-Token, Origin'
        ];
        if($request->getMethod() == "OPTIONS") {
            // The client-side application can set only headers allowed in Access-Control-Allow-Headers
            return Response::make('OK', 200, $headers);
        }

        $response = $next($request);
        foreach($headers as $key => $value)
            $response->header($key, $value);
        return $response;
    }

}

Route::get('test', array('middleware' => 'cors', 'uses' => 'TestController@test'));

我遇到了这样一个错误：

API通过

php artisan serve

命令在

localhost:8000

上运行。 Vue.js应用程序通过

warn run dev

命令在

localhost:8000

上运行。

---

有什么解决方法吗？

您需要在服务器配置中设置cors头，而不是您的请求

访问控制允许原点必须设置为*

Access Control Allow标头必须设置为Origin、X-Requested-With、Content Type和Accept

下面是一个nginx配置示例

和apache2说明

---

您正在从axios请求传递

访问控制

标题，但您还需要配置Laravel应用程序以接受来自外国的请求

为此，您需要在Laravel应用程序中添加CORS标头支持。您可以使用软件包轻松实现该功能

但如果您想手动执行此操作，请执行以下操作：

使用此中间件：

<script>
  import axios from 'axios';

  export default {
    data () {
      return {
        posts: {}
      }
    }, 
    created() {
      axios({
        method: 'get',
        url: 'http://localhost:8000/api/users',
        headers: {
          'Access-Control-Allow-Origin': '*',
          'Access-Control-Allow-Headers': 'Origin, Content-Type, X-Auth-Token, Authorization',
          'Access-Control-Allow-Methods': 'GET, POST, PATCH, PUT, DELETE, OPTIONS',
          'Access-Control-Allow-Credentials': true,     
          'Content-Type': 'text/html; charset=utf-8'   
        }
      }).then(response => {
          this.posts = response.data;
          console.log(this.posts[0].body);          
        }).catch(error => {
          console.error(error.message);          
        });
    }
  }
</script>

Route::get('users', 'UserController@index');

<?php namespace App\Http\Middleware;

use Closure;

class CORS {

    /**
     * Handle an incoming request.
     *
     * @param  \Illuminate\Http\Request  $request
     * @param  \Closure  $next
     * @return mixed
     */
    public function handle($request, Closure $next)
    {

        header("Access-Control-Allow-Origin: *");

        // ALLOW OPTIONS METHOD
        $headers = [
            'Access-Control-Allow-Methods'=> 'POST, GET, OPTIONS, PUT, DELETE',
            'Access-Control-Allow-Headers'=> 'Content-Type, X-Auth-Token, Origin'
        ];
        if($request->getMethod() == "OPTIONS") {
            // The client-side application can set only headers allowed in Access-Control-Allow-Headers
            return Response::make('OK', 200, $headers);
        }

        $response = $next($request);
        foreach($headers as $key => $value)
            $response->header($key, $value);
        return $response;
    }

}

Route::get('test', array('middleware' => 'cors', 'uses' => 'TestController@test'));

然后在所需的路由中应用中间件：

<script>
  import axios from 'axios';

  export default {
    data () {
      return {
        posts: {}
      }
    }, 
    created() {
      axios({
        method: 'get',
        url: 'http://localhost:8000/api/users',
        headers: {
          'Access-Control-Allow-Origin': '*',
          'Access-Control-Allow-Headers': 'Origin, Content-Type, X-Auth-Token, Authorization',
          'Access-Control-Allow-Methods': 'GET, POST, PATCH, PUT, DELETE, OPTIONS',
          'Access-Control-Allow-Credentials': true,     
          'Content-Type': 'text/html; charset=utf-8'   
        }
      }).then(response => {
          this.posts = response.data;
          console.log(this.posts[0].body);          
        }).catch(error => {
          console.error(error.message);          
        });
    }
  }
</script>

Route::get('users', 'UserController@index');

<?php namespace App\Http\Middleware;

use Closure;

class CORS {

    /**
     * Handle an incoming request.
     *
     * @param  \Illuminate\Http\Request  $request
     * @param  \Closure  $next
     * @return mixed
     */
    public function handle($request, Closure $next)
    {

        header("Access-Control-Allow-Origin: *");

        // ALLOW OPTIONS METHOD
        $headers = [
            'Access-Control-Allow-Methods'=> 'POST, GET, OPTIONS, PUT, DELETE',
            'Access-Control-Allow-Headers'=> 'Content-Type, X-Auth-Token, Origin'
        ];
        if($request->getMethod() == "OPTIONS") {
            // The client-side application can set only headers allowed in Access-Control-Allow-Headers
            return Response::make('OK', 200, $headers);
        }

        $response = $next($request);
        foreach($headers as $key => $value)
            $response->header($key, $value);
        return $response;
    }

}

Route::get('test', array('middleware' => 'cors', 'uses' => 'TestController@test'));

---

标题应该来自服务器，而不是客户端。i、 e.服务器应向客户端发出请求，请求中应包含您编写的标题。请提供一个示例？谢谢你，非常感谢。你节省了很多时间）它工作得很好。还有一个问题。。这样分离前端和后端是一种好的做法吗？因为Vue.js附带了现成的Laravel。我是说把拉威尔和维分开。。