时间戳

首页 > 解决方案 > 提交formdata时通过laravel应用程序从移动设备发出cors问题

javascript - 提交formdata时通过laravel应用程序从移动设备发出cors问题

问题描述

我有一个 laravel API 并使用https://github.com/barryvdh/laravel-cors插件。我的 config/cors.php 看起来像这样

'supportsCredentials' => false,
    'allowedOrigins' => ['*'],
    'allowedOriginsPatterns' => [],
    'allowedHeaders' => ['*'],
    'allowedMethods' => ['*'],
    'exposedHeaders' => [],
    'maxAge' => 0,

作为客户端，我使用的是 vue.js（没关系）。

问题：从桌面 chrome 浏览器，一切正常。根本没有cors问题。然后我构建它并从服务器和移动 chrome 上传，一切正常，除了一个页面负责上传带有 1 张图片的 formData。在桌面上，这很好用，但在移动 chrome 浏览器上却不行。

你认为可能是什么问题？

我使用了远程开发工具。这是我在移动设备上遇到的错误：

Access to XMLHttpRequest at 'example.api.com' from origin 'example.com' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

7.7259b24dd9d7819902a2.chunk.js:1 POST api.example.com net::ERR_FAILED

标签： javascriptphplaravelvue.js

解决方案

由于您有一个特定前端接口的 API，您可以简单地在barryvdh/laravel-cors配置中设置该域。这将避免错误检测调用域。

'supportsCredentials' => false,
'allowedOrigins' => ['example.com'],
'allowedOriginsPatterns' => [],
'allowedHeaders' => ['*'],
'allowedMethods' => ['*'],
'exposedHeaders' => [],
'maxAge' => 0,

.env如果您稍后有生产版本，则应该使用变量。

推荐阅读