需要一种在 vueJS 中启用 CORS 的方法 [重复]

Question

我是 vueJS 的新手，使用的版本是 2.0。我需要从 url 获取一些 JSON 数据。使用 javacsript fetch 方法从 URL 获取数据。下面是我的代码，

function getValue() {
            const requestOptions = {
                method: "GET",
                header: {"Access-Control-Allow-Origin": "GET"}
            };
              fetch("http://api.plos.org/search?q=title:DNA", requestOptions)
                .then(
                    (response) => {
                        console.log(response.json());
                    }
                );
        }

        getValue();

我遇到了类似的 CORS 问题，

Access to fetch at 'http://api.plos.org/search?q=title:DNA' from origin 'http://localhost:8080' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled.

我尝试了堆栈溢出中可用的所有可能性。但没有运气。 任何帮助将非常感激。 JSFiddle 链接 - https://jsfiddle.net/m45hsekf/

Answer 1

CORS 应该在服务器级别启用，例如节点或 java 应用程序。

Access-Control-Allow-Origin : "test-client.com" or use "*"（不推荐）。然后在服务器上允许这个值

Get 是你的 http 方法而不是原始值

要在节点中启用，请使用此行

res. header("Access-Control-Allow-Origin", "*"); // again * is not a best practice. Please accept this as answer too

有关更多信息，请参阅下面的网址 https://dzone.com/articles/cors-in-node

Answer 2

您是否尝试像错误提示的那样将模式设置为no-cors？

将请求的模式设置为“no-cors”以使用 CORS 获取资源 已禁用。

我已经测试过了，它可以工作：

const requestOptions = {
      method: "GET",
      mode: "no-cors"
};

所以请求看起来像这样：

fetch("http://api.plos.org/search?q=title:DNA", {
  mode: "no-cors"
})
  .then(response => response.json())
  .then(result => {
    console.log(result);
  });

Answer 3

当我在开发过程中遇到问题时，我使用名为 CORS UNBLOCK 的 crhome 扩展，然后我可以测试我的 api，当我部署到最终服务器时，总是在同一个域中，然后我没有 cors ploblem