Laravel + VueJS Axios

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

我正在使用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文件):

  1. header('Access-Control-Allow-Origin: *');
  2. header('Access-Control-Allow-Methods: *');
  3. header('Access-Control-Allow-Headers: *');

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

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


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

jgzswidk

jgzswidk1#

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

  1. module.exports = {
  2. devServer: {
  3. proxy: 'http://localhost:8080',
  4. }
  5. }

字符串

dy2hfwbg

dy2hfwbg2#

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

tktrz96b

tktrz96b3#

  1. <?php
  2. return [
  3. /*
  4. |--------------------------------------------------------------------------
  5. | Cross-Origin Resource Sharing (CORS) Configuration
  6. |--------------------------------------------------------------------------
  7. |
  8. | Here you may configure your settings for cross-origin resource sharing
  9. | or "CORS". This determines what cross-origin operations may execute
  10. | in web browsers. You are free to adjust these settings as needed.
  11. |
  12. | To learn more: https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS
  13. |
  14. */
  15. 'paths' => ['*', 'api/*', 'sanctum/csrf-cookie', 'login', 'logout'],
  16. 'allowed_methods' => ['*'],
  17. 'allowed_origins' => ['*'],
  18. 'allowed_origins_patterns' => [],
  19. 'allowed_headers' => ['*'],
  20. 'exposed_headers' => [],
  21. 'max_age' => 0,
  22. 'supports_credentials' => true,
  23. ];

字符串

展开查看全部

相关问题