[英]My webserver sends 404 when i make the request through react app, but works fine when I access it directly through chrome or postman
My web server is working fine when I call it through chrome. 通过chrome调用时,我的Web服务器工作正常。 However when I am using fetch or axiom in my react-app to call the same url, it returns 404 Not Found.
但是,当我在react-app中使用fetch或axiom调用相同的URL时,它将返回404 Not Found。 The react-app also sends a options request to same url which returns status 200. I have even set this header to allow the origin.
react-app还向相同的URL发送一个选项请求,返回状态200。我什至设置了此标头以允许来源。
app.use(async (ctx, next) => {
var origin = ctx.headers.origin;
ctx.set({
'Access-Control-Allow-Headers': 'authorization,Content-Type,refresh',
'Access-Control-Allow-Methods': "GET,HEAD,POST,PUT,DELETE",
'Access-Control-Allow-Origin': '*',
'Connection': 'keep-alive',
'Access-Control-Allow-Credentials': true
});
await next();
console.log('______________')
});
require('./routes')(app); //2
my ./routes.js file contain 我的./routes.js文件包含
//router.post('/signin' , signinController.signin);
router.get('/signin' , signinController.signin);
can you please tell me what I am missing here. 你能告诉我我在这里想念的东西吗? My axios call
我的axios电话
axios.get('http://localhost:3002/signin')
.then(function (response) {
console.log(response);
})
.catch(function (error) {
console.log(error);
});
Alright I tried your code out and it works for me if I use app.use(router.allowedMethods())
middleware to pass preflights, OR declare separate option-routes for each route; 好吧,我尝试了您的代码,如果我使用
app.use(router.allowedMethods())
中间件传递预检信息,或者为每个路由声明单独的选项路由,则对我有用。 Or instead of using router.get()
there is router.all('/signin', ...)
which will also catch options-requests. 或者不是使用
router.get()
,而是router.all('/signin', ...)
,它也会捕获选项请求。
This is my complete server code: 这是我完整的服务器代码:
const app = new Koa();
const router = new Router();
router.get('/signin' , (ctx, next) => {
ctx.body = '{"status":"hello"}';
});
// Adding a options-route works (instead of router.allowedMethods())
router.options('/signin' , (ctx, next) => {
ctx.body = '';
});
app.use(async (ctx, next) => {
var origin = ctx.headers.origin;
ctx.set({
'Access-Control-Allow-Headers': 'authorization,Content-Type,refresh',
'Access-Control-Allow-Methods': "GET,HEAD,POST,PUT,DELETE",
'Access-Control-Allow-Origin': '*',
'Connection': 'keep-alive',
'Access-Control-Allow-Credentials': true
});
await next();
console.log('______________')
});
app.use(router.routes());
// app.use(router.allowedMethods()); // This works instead of separate option-routes.
app.use((ctx, next) => {
console.log('here');
next();
});
app.listen(9787);
And this is my call: 这是我的电话:
axios.defaults.headers.common['Authorization'] = "sometoken";
axios.get('http://localhost:9787/signin').then(response =>{
console.log(response); // {data: {…}, status: 200, ... }
});
(I had to add the header or the CORS won't trigger.) (我必须添加标题,否则CORS将不会触发。)
I've tried setting various origin and headers and it does obey your middleware. 我尝试设置各种来源和标头,但它确实服从您的中间件。 But I did notice that if you choose to use
allowedMethods()
, that will override your Access-Control-Allow-Methods
(and make it useless). 但是我确实注意到,如果您选择使用
allowedMethods()
,它将覆盖您的Access-Control-Allow-Methods
(并使它无用)。
It has to do with cross origin support 它与跨源支持有关
You can use this package @koa/cors@2 to add cors support 您可以使用此软件包@ koa / cors @ 2添加对cors的支持
const Koa = require('koa');
const cors = require('@koa/cors');
const app = new Koa();
app.use(cors());
Heres the link to the package https://github.com/koajs/cors 这是指向软件包的链接https://github.com/koajs/cors
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.