我在 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);
}
})
}
注意:它已从服务器端启用,它仍然无法正常工作。目前,我无法从服务器端更改代码,我的工作仅限于客户端。
您的服务器应该启用跨源请求,而不是客户端。为此,您可以检查 this nice page 与多个平台的实现和配置
可能对某人有帮助:
我正在将数据从 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)
}
}
}
只是注意到我对可能从谷歌搜索到这里的人的解决方案。我通过在 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
。
我遇到了同样的问题。当我更改内容类型时,它已经解决了。我不确定此解决方案是否会帮助您,但也许可以。如果您不介意内容类型,它对我有用。
axios.defaults.headers.post['Content-Type'] ='application/x-www-form-urlencoded';
0
之所以会发生这种情况,是因为 restrict-origin-when-cross-origin 策略。浏览器发送一个飞行前请求以了解 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 服务器中路由之前使用此中间件。
在处理 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 获取请求。
希望这可以帮助!
这对我有用:
在 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")]
CORS 问题是您只会在 Broswer 上遇到的问题。这是因为服务器不允许来自其他服务器的请求
即,如果我从 http://localhost:3000 向任何 api(http://example.com/users) 发送请求以从此处获取用户数据。
如果服务器无法识别您的本地主机
@CrossOrigin(Origin = "*") // 这将允许来自任何服务器的任何请求,如果您使用此注释,您将不会遇到 CORS 问题
现在,如果您使用 axios 发送请求以响应另一个不受您控制的服务器,那么解决该问题的方法是使用 http-proxy-middleware
npm i http-proxy-middleware // 安装这个依赖
axios.{ 方法:'post',url:'/endpoint',标头:{'Content-Type':'application/json',},代理:createProxyMiddleware({ target:'https://www.api.com ', changeOrigin: true}), data: data };
现在以这种方式将向 www.api.com/endpoint 发送代理请求,因此您不会收到 cors 问题
也将它添加到你的 package.json
“代理”:“https://www.api.com”
当我使用 Axios 遇到同样的问题时,我遇到了这个线程。回复中没有提到的是,使用带有 no-cors 模式的 fetch 可以解决您的问题。
为什么 ?
显然,Axios 在后台使用了 XMLHttpRequest,而不是 Request,Axios 失败了,因为 CORS 仍在强制执行且不支持 no-cors 模式。
查看 this thread 了解更多信息
请试试这个..它对我有用
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'
}
无需使用 Access-Control-Allow-Origin : *
CORS问题可以通过以下方法简单地解决:
使用以下值创建 Google Chrome 的新快捷方式(相应地更新浏览器安装路径):
"C:\Program Files (x86)\Google\Chrome\Application\chrome.exe" --disable-web-security --user-data-dir="D:\chrome\temp"
不定期副业成功案例分享