本地主机上的 Access-Control-Allow-Origin（Laravel 和 Vue）CORS CORS 错误答案

【问题标题】：Access-Control-Allow-Origin (Laravel & Vue) CORS CORB error on localhost本地主机上的 Access-Control-Allow-Origin（Laravel 和 Vue）CORS CORS 错误
【发布时间】：2019-06-29 22:18:53
【问题描述】：

我使用了这个包，但它不起作用 (https://github.com/barryvdh/laravel-cors)

addSMS() {
    axios.post('https://smsmisr.com/api/webapi', {
                headers: {
                        'Access-Control-Allow-Origin': '*',
                        'Access-Control-Allow-Methods': 'POST, GET, PUT, OPTIONS, DELETE',
                        'Access-Control-Allow-Headers': 'Access-Control-Allow-Methods, Access-Control-Allow-Origin, Origin, Accept, Content-Type',
                        'Content-Type': 'application/json',
                        'Accept': 'application/json'
                    },
                username: '*****',
                passowrd: '****',
                etc: '',
            })
            .then(function (response) {
                console.log(response);
            })
            .catch(function (error) {
                console.log(error);
            });
        }

请告诉我如何解决它，它对我不起作用。

【问题讨论】：

标签： laravel api vue.js cors

【解决方案1】：

由于您无法访问 API 的源代码，因此与 .htaccess 或在脚本中添加 'Access-Control-Allow-Origin': '*', 无关。但是您仍然可以通过禁用安全模式打开 chrome 浏览器来消除此错误

在 windows 中运行 CMD（同时按下 windows 按钮和键盘上的 R 键。然后在框中输入 cmd 并输入）。

然后转到 C 驱动器（在 CLI 中）或您的 chrome 安装位置（使用 cd 命令）然后运行以下命令

“Program Files (x86)\Google\Chrome\Application\chrome.exe” –-allow-file-access-from-files --disable-web-security --user-data-dir --disable-features=CrossSiteDocumentBlockingIfIsolating

它将以禁用的网络安全模式打开您的浏览器。完成后，您现在可以使用这种CORS 或CORB 错误进行测试。

注意：在运行此命令之前，请确保尚未打开任何 chrome。

Program Files (x86)\Google\Chrome\Application\chrome.exe这应该是你的 chrome 安装路径

但是打开浏览器后会显示如下，不要惊慌，不要关闭此消息。如果您关闭此消息，它将再次通过此 CORS 或 CORB 错误

【讨论】：

我会尝试，但也许它不能解决我的问题，这个 api 也适用于邮递员
@AhmedMamdouh 是的，当您添加 https 时，即使在实时 srrver 上它也可以使用邮递员。但是这个本地主机和开发服务器的解决方案
你的意思是当我上传我的服务器时它会正常工作？
它工作得很好，谢谢，但是当我在 youtube 上看到所有使用 localhost 并且它与 cors 一起工作时我有疑问，为什么我会遇到这个问题。
@AhmedMamdouh 也许在早期版本的 chrome 中它可以工作，但存在安全问题，最新版本不允许这样做

【解决方案2】：

变化

'Content-Type': 'application/json',

到下面会解决问题：

'Content-Type': 'text/html; charset=UTF-8',

【讨论】：

【解决方案3】：

更新配置/cors.php

   'supportsCredentials' => false,
   'allowedOrigins' => ['*'],
   'allowedHeaders' => ['*'],
   'allowedMethods' => ['*'], // ex: ['GET', 'POST', 'PUT',  'DELETE']
   'exposedHeaders' => ['*'],
   'maxAge' => 0,

   then run
   php artisan config:cache 
   command i think it will help you

【讨论】：

我做了，什么也没做