有 CORS 问题的 Axios

我在 package.json 中添加了代理，它工作得很好，但是在 npm 运行 build 之后 CORS 问题又重新出现了，有人知道在 React 中 npm 运行 build 之后如何处理 CORS 问题吗。

我已经尝试过使用各种方法在 axios 请求中添加标头。但是，我未能在公理系请求中添加“ Access-Control-allow-Origin”: “ *”。我的代码如下:

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

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

720776 次浏览
小开
最佳答案

your server should enable the cross origin requests, not the client. To do this, you can check 这漂亮的一页 with implementations and configurations for multiple platforms

小开

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

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

可能对某人有帮助:

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

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

React form submit function:

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

登录，开始,

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

我在做 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 service/npm run dev) ，这次您将不会得到任何 CORS 错误，并且能够使用 Axios 获取请求。

希望这个能帮上忙！

小开

这对我来说很有效:

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 core) : 初创企业:

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

并且在操作之前在控制器中

[EnableCors("AllowOrigin")]
小开

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

创建一个新的 Google Chrome 快捷方式(相应地更新浏览器安装路径) ，其值如下:

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

CORS issue is something you will only encounter on a Broswer. It occurs beacuse the server does not allow request from others servers

例如，如果我从 http://localhost:3000向任何 api (http://example.com/users)发送请求，以便从这里获取用户数据。

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

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

现在，如果您使用 Axios 发送请求，以响应另一个不在您控制范围内的服务器，那么解决这个问题的方法是使用 http-xy-midware

中间件//安装这个依赖项

axios.{ 方法: 网址:’/endpoint’, 标题: { ‘ Content-Type’: ‘ application/json’, }, 代理: createProxyMiddleware ({ 目标: https://www.api.com 来源: true }) , 数据: 数据 };

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

也可以把这个添加到 package.json 中

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

小开

请试试这个. . 它为我工作

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

只要简单地把这个添加到你的 标题

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

No need to use Access-Control-Allow-Origin : *

小开

我只是想帮那些搜索过来的人记下我的解决方案。我通过在 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。

小开

0

This is happening because of restrict-origin-when-cross-origin policy.Browser sends a pre-flight request to know whom the API server wants to share the resources. So you have to set origin there in API server and send some status.After that the browser allow to send the request to the API server.

代码如下: 我在 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 }));

我已经将原点设置为我的前端 url，如果您将其设置为 true，那么它将只允许端口8000访问资源，并且在端口8000上运行的前端无法访问这个资源。在 api 服务器中路由之前使用此中间件。

小开

当我在使用 Axios 时遇到同样的问题时，我遇到了这个线程。在响应中没有提到的是，使用带有 no-cors 模式的提取可以解决您的问题。

为什么？

显然，Axios 在底层使用 XMLHttpRequest，而不是 Request and Axios fails because CORS is still being enforced and no-cors mode 不支持。

Check 这根线 for more information


提交答案