Laravel + VueJS Axios

y3bcpkx1  于 2023-11-20  发布在  iOS
关注(0)|答案(3)|浏览(129)

我正在使用Laravel版本7构建自己的API,尽管当我从vuejs(实际上是quasar)向Laravel发出请求时,我得到了:“从源'http://localhost:8080'访问XMLHttpRequest at 'http://127.0.0.1:8080/api/login'已被CORS策略阻止:请求的资源上没有'Web-Control-Allow-Origin'头。
只是为了一个肮脏的快速修复,我尝试添加(到我的顶级bootstrap/app.php文件):

header('Access-Control-Allow-Origin: *');
header('Access-Control-Allow-Methods: *');
header('Access-Control-Allow-Headers: *');

字符串
我还尝试将其添加到中间件类中,如下所示:

return $next($request)
          ->header('Access-Control-Allow-Origin', '*')
          ->header('Access-Control-Allow-Methods', 'GET, POST, PUT, DELETE, OPTIONS');


错误仍然存在。我错过了什么?
x1c 0d1x的数据

jgzswidk

jgzswidk1#

您可以通过在vue config中设置代理来处理CORS
vue.config.js

module.exports = {
 devServer: {
  proxy: 'http://localhost:8080',
 }
}

字符串

dy2hfwbg

dy2hfwbg2#

你应该在所有来自服务器的响应中发送头Access-Control-Allow-Origin。我不太了解Laravel,但似乎只有选项发送此响应头。
您可以使用浏览器对此进行调试。打开网络选项卡并检查您的服务器是否在所有请求中发送响应头Access-Control-Allow-Origin
虽然这应该可以解决问题,但您应该记住,在生产环境中,对CORS使用一个白名单(*)是一种不好的做法,在部署应用程序时应将其替换为白名单

tktrz96b

tktrz96b3#

<?php

return [

    /*
    |--------------------------------------------------------------------------
    | Cross-Origin Resource Sharing (CORS) Configuration
    |--------------------------------------------------------------------------
    |
    | Here you may configure your settings for cross-origin resource sharing
    | or "CORS". This determines what cross-origin operations may execute
    | in web browsers. You are free to adjust these settings as needed.
    |
    | To learn more: https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS
    |
    */

    'paths' => ['*', 'api/*', 'sanctum/csrf-cookie', 'login', 'logout'],

    'allowed_methods' => ['*'],

    'allowed_origins' => ['*'],

    'allowed_origins_patterns' => [],

    'allowed_headers' => ['*'],

    'exposed_headers' => [],

    'max_age' => 0,

    'supports_credentials' => true,

];

字符串

相关问题