美文网首页
node+express(解决跨域)

node+express(解决跨域)

作者: 码农一名__ | 来源:发表于2020-12-26 01:33 被阅读0次

最近在研究node+express搭建简单的后台,但发现了跨域如下图:


跨域

因为我的后端地址的端口号为3000,前台启动的端口号是8080;由于同源策略,就跨域了。既然跨域了,问题还是要解决。查了资料,我最初是在express搭建的项目中,找到app.js
加了这么一段代码,如下图:


跨域尝试解决图一
但是问题并没有解决,还是报跨域。很显然这样写没用,我就想到了express中使用中间件,又测试了一番。最后附上正确解决跨域的代码:
app.use((req, res, next) => {
    //设置请求头
    res.set({
        'Access-Control-Allow-Credentials': true,
        'Access-Control-Max-Age': 1728000,
        'Access-Control-Allow-Origin': req.headers.origin || '*',
        'Access-Control-Allow-Headers': 'X-Requested-With,Content-Type',
        'Access-Control-Allow-Methods': 'PUT,POST,GET,DELETE,OPTIONS',
        'Content-Type': 'application/json; charset=utf-8'
    })
    req.method === 'OPTIONS' ? res.status(204).end() : next()
})

其中 'Access-Control-Allow-Origin': req.headers.origin || '*',就是解决跨域最关键的一句。

同时附上:app.use('/',callback)和app.all('',callback)区别*
app.use只查看路由是否以指定的路径开头
app.all匹配完整的路径
'/',是根路径,那么所有路径进来,都会执行 callback,'/' 也是 use 的默认 path,callback 是否执行,要看 callback的路径前加上'/'和实际路径是否匹配。
*是一个正则,匹配所有路径,但是只要一个路径进来,可能都会执行 callback。

相关文章

  • node+express(解决跨域)

    最近在研究node+express搭建简单的后台,但发现了跨域如下图: 因为我的后端地址的端口号为3000,前台启...

  • 浏览器跨域的那些事

    整理中 目标: 了解跨域 解决跨域 服务器配置跨域(java, nginx) 前端调试时配置解决跨域 一、什么是跨...

  • 解决ajax跨域问题

    Jsonp解决ajax跨域问题 CORS解决ajax跨域问题

  • 浏览器跨域及其解决方案

    title: 浏览器跨域及其解决方案author: Maydate: 20220428 什么是跨域跨域的表现解决跨...

  • ajax readystatus=0;status=0 报错

    跨域 跨域 跨域 一定要找运维或者后台解决

  • 跨域解决方案

    在讲解决跨域解决方案之前,我们需要了解什么是跨域,在什么情况下会跨域,跨域解决的是什么问题? 一、跨域,是指浏览器...

  • 跨域

    什么是跨域?怎么解决跨域问题?

  • 深入跨域问题(3) - 利用 JSONP 解决跨域

    深入跨域问题(1) - 初识 CORS 跨域资源共享;深入跨域问题(2) - 利用 CORS 解决跨域深入跨域问题...

  • 跨域

    跨域资源共享 CORS 详解什么是跨域及怎么解决跨域问题?

  • 跨域问题,解决方案

    跨域问题,解决方案 - Nginx反向代理跨域问题,解决方案 - CORS方案此为原作者的链接:跨域问题,解决之道

网友评论

      本文标题:node+express(解决跨域)

      本文链接:https://www.haomeiwen.com/subject/cbewnktx.html