如何解决在请求的资源错误中不存在“ Access-Control-Allow-Origin”标头

Question

我在前端使用Vue，在后端使用Laravel。我正在尝试使用“ https://www.transparency.treasury.gov/services/api/fiscal_service/v1/accounting/od/debt_to_penny?sort=-data_date”访问一个api。当我尝试访问api时，在浏览器中出现以下错误。

这是我在Vue中的代码

axios.get('https://www.transparency.treasury.gov/services/api/fiscal_service/v1/accounting/od/debt_to_penny?sort=-data_date',{
            }).catch( error => {
                var errors = error.response.data.errors
                console.log(errors);
            }).then(({ data }) => {
                console.log(data)
            });

我做了一些研究并添加了

<httpProtocol>
           <customHeaders>
             <add name="Access-Control-Allow-Origin" value="*" />
           </customHeaders>
    </httpProtocol>

到我的web.config文件。我也将CORS扩展名添加到chrome中，并添加了网址。到目前为止，我没有做过任何事情。

Answer 1

您有两种选择。

1）在Google chrome上安装CORS插件。这是一个扩展，很容易找到。

2）在api后端，打开laravel目录根目录下的.htaccess文件，并添加这4行。

Header add Access-Control-Allow-Origin "*"
Header add Access-Control-Allow-Credentials true
Header add Access-Control-Allow-Headers "authorization,language,Content-Type"
Header add Access-Control-Allow-Methods "GET,POST,OPTIONS,DELETE,PUT"

第三行授权中的

和语言是我的标头参数。您可能有不同的选择。

我建议您仅安装CORS。如果您处于开发模式，只需在Google chrome上安装CORS。如果选择第二个选项，则只能为apache Web服务器添加这4行。对于nginx，您必须将其添加到nginx配置中的其他位置。但是我认为您处于开发模式，因此请安装CORS。

Answer 2

请安装Cors提供程序并进行设置，以便在请求中添加标头

https://github.com/barryvdh/laravel-cors

这是我的设置可能会对您有所帮助

input + 1

请尝试一下，让我知道它如何工作:)

Answer 3

我在开发应用程序时遇到了同样的问题，我在Google Chrome上进行了测试，但在命令行中使用了--disabled-web-security标志。

open -a Google\ Chrome --args --disable-web-security --user-data-dir=""

有人可以批准或解释这种方法的副作用吗？只要您不使用自己的敏感数据就可以。不是吗？