Axios 有 CORS 问题

IT技术 reactjs proxy cors axios
2021-04-10 04:11:53

我在 package.json 中添加了代理并且效果很好，但是在 npm run build 之后 CORS 问题再次浮出水面，有没有人知道在 React 中 npm run build 之后如何处理 CORS 问题。

我尝试使用各种方法在 axios 请求中添加标头。但是，我未能在 axios 请求中添加 'Access-Control-Allow-Origin':'*' 。我的代码如下：

包.json

  "proxy": {
      "*":{ "target" : "http://myurl"}
   }

获取数据.js

  axios.defaults.baseURL = 'http://myurl';
  axios.defaults.headers.post['Content-Type'] ='application/json;charset=utf-8';
  axios.defaults.headers.post['Access-Control-Allow-Origin'] = '*';
  axios.get(serviceUrl, onSuccess, onFailure)
  .then(resp => { 
        let result = resp.data;
        onSuccess(result);
  })
  .catch(error => {
        if(onFailure) {
            return onFailure(error);
        }
  })
 }

注意：它已从服务器端启用，它仍然无法正常工作。目前，我无法从服务器端更改代码，我的工作仅限于客户端。

6个回答

您的服务器应该启用跨源请求，而不是客户端。为此，您可以查看这个漂亮的页面，其中包含多个平台的实现和配置

它已从服务器端启用，它仍然无法正常工作。目前，我无法从服务器端更改代码，我的工作仅限于客户端。
2021-05-26 04:11:53
如果您无法控制服务器端，这仍然需要通过其他方式解决。
2021-05-27 04:11:53
是的，你是对的，它需要从服务器端解决。
2021-06-03 04:11:53
也许它在服务器端没有正确配置。检查谷歌浏览器的网络标签。应该有2个请求。第一个是预检请求（只是为了检查 CORS 标头）。也许服务器没有正确回答这个第一个预检请求
2021-06-10 04:11:53
对于 asp.net Core 2 webapi，您可以按照Microsoft 官方文档中的说明进行操作
2021-06-13 04:11:53

可能对某人有帮助：

我正在将数据从react应用程序发送到golang服务器。

一旦我改变了这个，w.Header().Set("Access-Control-Allow-Origin", "*")错误就被修复了。

react表单提交功能：

async handleSubmit(e) {
    e.preventDefault();
    
    const headers = {
        'Content-Type': 'text/plain'
    };

    await axios.post(
        'http://localhost:3001/login',
        {
            user_name: this.state.user_name,
            password: this.state.password,
        },
        {headers}
        ).then(response => {
            console.log("Success ========>", response);
        })
        .catch(error => {
            console.log("Error ========>", error);
        }
    )
}

去服务器有路由器，

func main()  {
    router := mux.NewRouter()

    router.HandleFunc("/login", Login.Login).Methods("POST")

    log.Fatal(http.ListenAndServe(":3001", router))
}

登录.go,

func Login(w http.ResponseWriter, r *http.Request)  {

    var user = Models.User{}
    data, err := ioutil.ReadAll(r.Body)

    if err == nil {
        err := json.Unmarshal(data, &user)
        if err == nil {
            user = Postgres.GetUser(user.UserName, user.Password)
            w.Header().Set("Access-Control-Allow-Origin", "*")
            json.NewEncoder(w).Encode(user)
        }
    }
}
当我将“Access-Control-Allow-Origin”添加到我的标题时，它也对我有用！我知道我晚了 2 年，但这如何解决 CORS 问题？非常感谢！
2021-06-02 04:11:53

我遇到过同样的问题。当我更改内容类型时，它已经解决了。我不确定这个解决方案会帮助你，但也许是。如果你不介意内容类型，它对我有用。

axios.defaults.headers.post['Content-Type'] ='application/x-www-form-urlencoded';
其实在那之后。我意识到我在 Access-Control-Allow-Headers 中有一些错误，需要正确组织。我认为重点是这个。
2021-05-27 04:11:53
这是有效的，因为您更改为一个简单的请求，在这种情况下，来自您的服务器的响应只需要包含标头 Access-Control-Allow-Origin
2021-06-01 04:11:53

在处理 Vue.js 项目时，我遇到了相同的 CORS 错误。您可以通过构建代理服务器或另一种方法来解决此问题，即禁用浏览器（例如 CHROME）的安全设置以访问跨源 api（这是临时解决方案，而不是解决问题的最佳方法）。这两种解决方案都对我有用。后面的解决方案不需要构建任何模拟服务器或代理服务器。这两种解决方案都可以在前端解决。

您可以通过在终端上键入以下命令来禁用用于从源访问 api 的 chrome 安全设置：

/Applications/Google\ Chrome.app/Contents/MacOS/Google\ Chrome --user-data-dir="/tmp/chrome_dev_session" --disable-web-security

在终端上运行上述命令后，将打开一个禁用安全设置的新 chrome 窗口。现在，再次运行您的程序（npm run serve / npm run dev），这次您将不会收到任何 CORS 错误，并且可以使用 axios 获取请求。

希望这可以帮助！

这实际上帮助我解决了我的问题。谢谢
2021-06-16 04:11:53

只是注意到我为可能从谷歌搜索到这里的人的解决方案。我通过在我的调用中设置withCredentials为解决了我的 CORS 问题（在浏览器中从我的 UI 调用外部 api 时）：falseaxios

axios({
    method: 'get',
    url: `https://api.someurl.com/subject/v2/resource/somevalue`,
    withCredentials: false,
    params: {
      access_token: SECRET_TOKEN,
    },
  });

在这种情况下，外部 api 端点的安全性基于access_token.

其它你可能感兴趣的问题
上一篇如何在react-select中设置默认值 下一篇未找到 `React/RCTBridgeModule.h` 文件