fetch : o 'Access-Control-Allow-Origin' 标头出现在请求的资源上：react 和 node

Posted 2023-02-27

【中文标题】fetch : o \'Access-Control-Allow-Origin\' 标头出现在请求的资源上：react 和 node

【英文标题】：fetch : o 'Access-Control-Allow-Origin' header is present on the requested resource : react and nodefetch : o 'Access-Control-Allow-Origin' 标头出现在请求的资源上：react 和 node

【发布时间】：2020-03-10 20:26:41

【问题描述】：

我有这个错误我不知道为什么在我的后端节点 js 中我使用 cors

const express = require('express');
const bodyParser = require('body-parser');
const port = 8080;
const  cors = require('cors');

require('./database/index')

const usersRouter = require('./routes/userRoutes');
const postRouter = require('./routes/post');

const app = express();
const router = express.Router();

usersRouter.configuration(router);
postRouter.configuration(router);

app.use(express.json());
app.use(bodyParser.json());
app.use(bodyParser.urlencoded( extended: true ));
app.set('port',port);
app.use('/', router);
app.use(cors());
app.use(function(req, res, next) 
    res.header("Access-Control-Allow-Origin", "*");
    res.header('Access-Control-Allow-Methods: GET, POST, OPTIONS');
    res.header("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept");
    next();
  );

我的方法前端：

signIn = () => 
    const data = login:this.login,password:this.password;
    const requestInfo = 
        method:'POST',
        body: JSON.stringify(data),
        headers: new Headers(
            'Content-Type': 'application/json'
        ),
    ;
    fetch('http://localhost:8080/login', requestInfo)
    .then(response => 
        if(response.ok)
            return response.json();
        
        throw new Error("Login Invalido..")
    )
    .then(token => 
        sessionStorage.setItem('token', JSON.stringify(token.token));
        this.props.history.push("/users");
        return;
    )
    .catch(e => 
        this.setState(message: e.message)
    );

错误：

从原点获取 'http://localhost:8080/login' 的访问权限 “http://localhost:3000”已被 CORS 策略阻止：响应 预检请求未通过访问控制检查：否 请求中存在“Access-Control-Allow-Origin”标头 资源。如果不透明的响应满足您的需求，请设置请求的 模式为“no-cors”以获取禁用 CORS 的资源。

【问题讨论】：

尝试使用 127.0.0.1:8080 ip 运行服务器

【参考方案1】：

尝试将CORS放在路由器配置之前。

const express = require('express');
const bodyParser = require('body-parser');
const port = 8080;
const  cors = require('cors');

require('./database/index')

const usersRouter = require('./routes/userRoutes');
const postRouter = require('./routes/post');

const app = express();
const router = express.Router();

app.use(cors());
app.use(function(req, res, next) 
    res.header("Access-Control-Allow-Origin", "*");
    res.header('Access-Control-Allow-Methods: GET, POST, OPTIONS');
    res.header("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept");
    next();
  );

app.use(express.json());
app.use(bodyParser.json());
app.use(bodyParser.urlencoded( extended: true ));
app.set('port',port);

usersRouter.configuration(router);
postRouter.configuration(router);

app.use('/', router);