Axios出现CORS问题

时间:2018-06-20 13:36:20

标签: reactjs proxy cors axios

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

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

package.json

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

GetData.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);
        }
  })
 }

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

10 个答案:

答案 0 :(得分:7)

您的服务器应启用跨源请求,而不是客户端。为此,您可以检查this nice page的多个平台的实现和配置

答案 1 :(得分:2)

在处理Vue.js项目时,我遇到了同样的CORS错误。您可以通过构建代理服务器来解决此问题,也可以通过禁用浏览器(例如CHROME)的安全设置来访问跨源api来解决此问题(这是临时解决方案,不是解决问题的最佳方法)。这两种解决方案都对我有用。更高版本的解决方案不需要构建任何模拟服务器或代理服务器。这两种解决方案都可以在前端解决。

您可以通过在终端上键入以下命令来禁用Chrome安全性设置,以便从源头访问api:

/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来获取请求。

希望这会有所帮助!

答案 2 :(得分:0)

我遇到了同样的问题。当我更改内容类型时,它已经解决了。我不确定 该解决方案将为您提供帮助,但也许可以。如果您不介意内容类型,那么它对我有用。

axios.defaults.headers.post['Content-Type'] ='application/x-www-form-urlencoded';

答案 3 :(得分:0)

可以帮助某人:

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

一旦我对此进行了更改,w.Header().Set("Access-Control-Allow-Origin", "*")。错误已解决。

反应表单提交功能:

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);
        }
    )
}

Go服务器安装了路由器

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

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

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

Login.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)
        }
    }
}

答案 4 :(得分:0)

这对我有用:

在javascript中:

Axios({
            method: 'post',
            headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
            url: 'https://localhost:44346/Order/Order/GiveOrder',
            data: order
          }).then(function (response) {
            console.log(response.data);
          });

以及在后端(.net核心)中: 在启动时:

 #region Allow-Orgin
            services.AddCors(c =>
            {
                c.AddPolicy("AllowOrigin", options => options.AllowAnyOrigin());
            });
            #endregion

并在控制器中执行操作

[EnableCors("AllowOrigin")]

答案 5 :(得分:0)

只是注意到我为可能从谷歌搜索到这里的人的解决方案。我通过在 withCredentials 调用中将 false 设置为 axios 解决了我的 CORS 问题(在浏览器中从我的 UI 调用外部 API 时):

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

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

答案 6 :(得分:-1)

CORS 问题是您只会在 Broswer 上遇到的问题。这是因为服务器不允许来自其他服务器的请求

即如果我从 http://localhost:3000 向任何 api(http://example.com/users) 发送请求以从此处获取用户数据。

如果服务器无法识别您的本地主机

@CrossOrigin(Origin = "*") // 这将允许来自任何服务器的任何请求,如果您使用此注释,您将不会面临 CORS 问题

现在,如果您使用 axios 发送请求以响应另一个不在您控制范围内的服务器,那么解决该问题的方法是使用 http-proxy-middleware

npm i http-proxy-middleware // 安装这个依赖

轴。{ 方法:'发布', 网址:'/端点', 标题:{ '内容类型':'应用程序/json', }, 代理:createProxyMiddleware({ 目标:'https://www.api.com', changeOrigin: true}), 数据:数据 };

现在以这种方式向 www.api.com/endpoint 发送代理请求,因此您不会收到 cors 问题

也在你的 package.json 中添加这个

“代理”:“https://www.api.com”

答案 7 :(得分:-2)

CORS问题可以通过以下简单解决:

使用以下值创建Google Chrome的新快捷方式(相应地更新浏览器安装路径):

"C:\Program Files (x86)\Google\Chrome\Application\chrome.exe" --disable-web-security --user-data-dir="D:\chrome\temp"

答案 8 :(得分:-2)

请试试这个..它对我有用

axios.get(`http://localhost:4000/api`,{ crossdomain: true }).then((result)=>{
        console.log("result",result);
      }).catch((error)=>{
        console.log("Error",error);
      });

答案 9 :(得分:-3)

只需将此添加到您的标题

headers : {
    'Content-Type' : 'application/x-www-form-urlencoded; charset=UTF-8'
}

无需使用Access-Control-Allow-Origin : *