美文网首页
express 配置跨域

express 配置跨域

作者: webmrxu | 来源:发表于2018-11-12 22:49 被阅读0次

    前后端分离开发,经常遇到的问题就是跨域问题,以前会使用jsonp 进行跨域,但不是很优雅;现在有了 CORS 后端配置可允许跨域,这样可以很优雅的解决跨域问题。

    在部署项目时,可选择nginx配置反向代理,这样也能解决跨域问题,但是在开发阶段,往往会启动两个服务,使用不同的端口,就会有跨域问题的产生。

    使用express 开发后端,进行简单的配置解决跨域问题。

    跨域前:

    跨域前

    后段代码:

    const express = require('express');
    
    const app = express()
    
    app.get('/', (req, res) => res.send('Hello World!'))
    
    app.listen(3004, () => console.log('Example app listening on port 3001!'))
    

    解决跨域后:


    解决跨域

    后端代码:

    const express = require('express');
    
    const app = express()
    //设置允许跨域访问该服务.
    app.all('*', function (req, res, next) {
        res.header('Access-Control-Allow-Origin', '*');
        res.header('Access-Control-Allow-Headers', 'Content-Type');
        res.header('Access-Control-Allow-Methods', '*');
        res.header('Content-Type', 'application/json;charset=utf-8');
        next();
      });
      
      
    app.get('/', (req, res) => res.send('Hello World!'))
    
    app.listen(3005, () => console.log('Example app listening on port 3005!'))
    

    这样解决跨域的问题真的是很简单,后端进行简单的配置就行可以。现在的大部分后端框架都支持后端跨域,express、spring等。如果你不知道你现在的项目是怎么解决跨域问题的,可以全局搜索项目,使用Access-Control-Allow 关键词进行搜索。

    相关文章

      网友评论

          本文标题:express 配置跨域

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