nodejs各种框架跨域设置

简介: nodejs各种框架跨域设置

在每次遇到跨域问题,再设置后端跨域配置的时候都会重新在笔记中查找,所以没在这里总结一下各种框架的跨域配置。


nodejs


设置配置。


  • 这里需要注意的是Access-Control-Allow-Origin不能是*号。 这样浏览器就不会拦截服务器设置的cookie了。


  • 因为设置允许携带cookie之后那么请求头Access-Control-Allow-Origin的值就不能设置为*,所以要另外指向一个。


// 设置允许跨域的源
 res.setHeader("Access-Control-Allow-Origin",req.headers.origin);  
 // 设置cookie允许跨域
 res.setHeader("Access-Control-Allow-Credentials", true);  
 // 设置可以跨域的请求方法
 res.setHeader("Access-Control-Request-Method", "PUT,POST,GET,DELETE,OPTIONS");


前端需要设置cookie跨域设置。请求头中设置withCredentials: true。这里默认情况下在跨域请求,浏览器是不带 cookie 的。但是我们可以通过设置 withCredentials 来进行传递 cookie。


egg.js


启用插件


// plugin.js
    exports.cors = {
        enable: true,
        package: 'egg-cors'
    }


设置配置


// config.default.js
  config.security = {
    csrf: {
      enable: false
    },
    // 设置跨域白名单
    domainWhiteList: [
      'http://localhost:8080',
      'http://127.0.0.1:8080',
    ],
  };
  config.cors = {
    credentials: true,   // 开启认证//允许Cook可以跨域credentials
    allowMethods: "GET,HEAD,PUT,POST,DELETE,PATCH,OPTIONS"
  };


可以自己手动设置请求origin通过


// config/config.default.js
    exports.cors = {
      origin: function ({ req }) {
        const { origin } = req.headers;
        // 配置允许访问白名单
        const whiteList = [
          'http://localhost:7001',
          'http://127.0.0.1:7001',
        ];
        if (whiteList.includes(origin)) {
          return origin;
        }
      },
      credentials: true,   // 开启认证//允许Cook可以跨域credentials
      allowMethods: 'GET,HEAD,PUT,POST,DELETE,PATCH'
    };


express


通过插件完成


// 引入跨域插件
    const cors = require('cors'); 
    // 解决跨域
    app.use(cors());
    // 手动覆盖cors跨域默认设置
    const whitelist = ['http://127.0.0.1:8080', 'http://localhost:8080']
    const corsOptions = {
      origin: function (origin, callback) {
        if (whitelist.indexOf(origin) !== -1) {
          callback(null, true)
        } else {
          callback(new Error('Not allowed by CORS'))
        }
      },
      credentials: true
    }
    app.use(cors(corsOptions));


通过手动配置中间件


app.all("*", (req, res, next) => {
  res.header("Access-Control-Allow-Origin", req.headers.origin);
  res.header("Access-Control-Allow-Credentials", true); // ++ 新增
  // 设置可以跨域的请求方法
  res.header("Access-Control-Request-Method", "PUT,POST,GET,DELETE,OPTIONS");
  next();
});


koa


通过插件


const cors = require('koa2-cors'); 
    const app = new Koa(); 
    app.use(cors());
    // 或者自己配置各个头的值。
    app.use(cors({
      origin: function(ctx) {
        if (ctx.url === '/test') {
          return "*";
        }
        return ctx.headers.origin;
      },
      credentials: true,
      allowMethods: ['GET', 'POST', 'DELETE']
    }));


通过手动配置中间件


app.use(async (ctx, next)=> {
      ctx.set('Access-Control-Allow-Origin', ctx.headers.origin);
      ctx.set('Access-Control-Allow-Methods', 'PUT, POST, GET, DELETE, OPTIONS');
   });


相关文章
|
1月前
|
Web App开发 JavaScript 前端开发
构建高效后端服务:Node.js与Express框架的实战指南
【9月更文挑战第6天】在数字化时代的潮流中,后端开发作为支撑现代Web和移动应用的核心,其重要性不言而喻。本文将深入浅出地介绍如何使用Node.js及其流行的框架Express来搭建一个高效、可扩展的后端服务。通过具体的代码示例和实践技巧,我们将探索如何利用这两个强大的工具提升开发效率和应用性能。无论你是后端开发的新手还是希望提高现有项目质量的老手,这篇文章都将为你提供有价值的见解和指导。
|
2月前
|
JavaScript 前端开发 中间件
构建高效后端服务:Node.js与Express框架的完美搭档
【8月更文挑战第28天】在追求高性能、可扩展和易维护的后端开发领域,Node.js和Express框架的组合提供了一种轻量级且灵活的解决方案。本文将深入探讨如何利用这一组合打造高效的后端服务,并通过实际代码示例展示其实现过程。
|
2月前
|
存储 JavaScript NoSQL
构建高效Web应用:使用Node.js和Express框架
【8月更文挑战第30天】本文将引导你了解如何使用Node.js和Express框架快速搭建一个高效的Web应用。通过实际的代码示例,我们将展示如何创建一个简单的API服务,并讨论如何利用中间件来增强应用功能。无论你是新手还是有经验的开发者,这篇文章都将为你提供有价值的见解。
|
3天前
|
Web App开发 JavaScript 前端开发
使用Node.js和Express框架构建Web服务器
使用Node.js和Express框架构建Web服务器
|
4天前
|
Web App开发 JavaScript API
构建高效后端系统:Node.js与Express框架的实践之路
【9月更文挑战第37天】在数字化时代的浪潮中,后端开发作为技术架构的核心,承载着数据处理和业务逻辑的重要职责。本文将深入探讨如何利用Node.js及其强大的Express框架来搭建一个高效、可扩展的后端系统。我们将从基础概念讲起,逐步引导读者理解并实践如何设计、开发和维护一个高性能的后端服务。通过实际代码示例和清晰的步骤说明,本文旨在为初学者和有经验的开发者提供一个全面的指南,帮助他们在后端开发的旅途上走得更远。
21 3
|
13天前
|
Web App开发 JavaScript 前端开发
构建高效Web应用:Node.js与Express框架的深度整合
【9月更文挑战第28天】在现代Web开发领域,Node.js和Express框架的结合已成为打造高性能、易扩展应用的黄金组合。本文将深入探讨如何利用这一技术栈优化Web应用架构,提供具体实践指导,并分析其性能提升的内在机制。通过代码示例,我们将展示从基础搭建到高级功能的实现过程,旨在为开发者提供一条清晰的学习路径,以实现技术升级和项目效率的双重提升。
29 3
|
17天前
|
前端开发 JavaScript
node反向代理,解决跨域(http-proxy-middleware)
使用node.js和http-proxy-middleware库实现反向代理,解决跨域问题,允许前端请求通过代理访问不同端口的服务。
24 3
|
23天前
|
缓存 监控 JavaScript
构建高效后端服务:Node.js与Express框架的完美结合
【9月更文挑战第18天】在数字化时代的浪潮中,后端服务的效率和稳定性成为了企业竞争力的关键。本文将深入探讨如何使用Node.js和Express框架来构建一个既高效又稳定的后端服务,同时通过实际代码示例,展示如何优化性能并确保服务的高可用性。
|
1月前
|
Web App开发 缓存 JavaScript
构建高效后端服务:Node.js与Express框架的完美结合
【9月更文挑战第11天】本文将引导开发者探索如何利用Node.js和Express框架搭建一个高效的后端服务。文章不仅深入讲解了这两个工具的核心概念,还通过实际示例展示了它们的强大功能和易用性。读者将学会如何处理HTTP请求、设计RESTful API以及优化应用性能。无论你是初学者还是有经验的开发者,这篇文章都将为你提供宝贵的知识,帮助你在后端开发领域更进一步。
|
13天前
|
JSON JavaScript 前端开发
构建高效Web应用:Node.js与Express框架的完美结合
【9月更文挑战第28天】在现代Web开发中,Node.js和Express框架的结合为创建高性能、易扩展的应用提供了强有力的支持。本文将深入探讨如何利用这两种技术构建一个简单但功能强大的Web服务,同时提供代码示例以加深理解。