Axios 有 CORS 问题

Question

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

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

Answer 1

我在使用 Axios 时遇到同样的问题时遇到了这个线程。回复中没有提到的是，使用 fetch 和 no-cors 模式可以解决您的问题。

为什么？

显然，Axios 在后台使用 XMLHttpRequest，而不是 Request 并且 Axios 失败了，因为 CORS 仍在强制执行且无 Cors 模式 不支持。

查看this thread了解更多信息

Answer 2

0

发生这种情况是因为限制原点时跨域策略。浏览器发送飞行前请求以了解 API 服务器想要共享资源的对象。因此，您必须在 API 服务器中设置来源并发送一些状态。之后浏览器允许将请求发送到 API 服务器。

这是代码。我在 localhost:8000 上运行前端，而 api 服务器在端口 6000 上运行。

const cors = require("cors");

app.options("*", cors({ origin: 'http://localhost:8000', optionsSuccessStatus: 200 }));

app.use(cors({ origin: "http://localhost:8000", optionsSuccessStatus: 200 }));

我设置了origin作为我的前端url，如果你设置为true，那么它将只允许8000端口访问rosource，而运行在8000端口的前端不能访问该资源。在 api server 中路由之前使用这个中间件。

Answer 3

只是为那些可能通过谷歌搜索到这里的人指出我的解决方案。我通过在axios 调用中将withCredentials 设置为false 解决了我的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。

Answer 4

只需将此添加到您的标题

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

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

Answer 5

可能对某人有帮助：

我正在将数据从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);
        }
    )
}

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

Answer 6

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

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

Answer 7

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

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

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

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

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

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

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

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

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

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

Answer 8

我在处理 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 获取请求。

希望这会有所帮助！

Answer 9

CORS 问题可以通过以下方法简单地解决：

使用以下值创建一个新的谷歌浏览器快捷方式（相应地更新浏览器安装路径）：

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

Answer 10

这对我有用：

在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")]

Answer 11

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

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

Answer 12

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