Express 框架解决跨域问题_express has been blocked by cors policy-优快云博客

本文链接：https://blog.youkuaiyun.com/weixin_43379230/article/details/104071821

本文介绍了在Node.js的Express框架中如何解决跨域访问问题。当遇到跨域错误时，可以通过设置'Access-Control-Allow-Origin'响应头来允许特定来源的请求。解决此问题的关键代码需要放在路由处理之前。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

                    
                        
                    
                    当我们在浏览器的console控制台中看到类似如下的信息：Access to XMLHttpRequest at 'http://localhost:3001/books' from origin 'http://localhost:63342'
has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.
 这表示存在着跨域问题。解决的办法就是在拦截每个请求的路由上添加’Access-Control-Allow-Origin’ header。
下面是node express框架解诀跨域问题的代码，注意解决跨域的代码要放在处理路由的代之前，否则将会不起作用：//===== 项目入口文件 =====
const express = require('express');
const app = express();
const bodyParser = require('body-parser');
const router = require('./router');

//----- 配置跨域 -----
// express框架解决跨域问题的代码，注意该代码要放在 app.use(router); 之前
app.all('*', (req, res, next) => {
    res.header("Access-Control-Allow-Origin", "*");
    res.header("Access-Control-Allow-Headers", "X-Requested-With");
    res.header("Access-Control-Allow-Methods", "PUT,POST,GET,DELETE,OPTIONS");
    res.header("X-Powered-By", 'Express');
    res.header("Content-Type", "application/json;charset=utf-8");
    next();
});

//----- 配置路由 -----
app.use(router);

//----- 配置参数解析-----
app.use(bodyParser.urlencoded({extended:true}));
app.use(bodyParser.json());

//----- 监听端口 -----
const port = process.env.port || 3001;
app.listen(port,(error) => {
    console.log(`server running on ${port}`);
});

 

                