前端跨域问题的总结&&nodejs 中间层的路由转发

简介: 前后端交互的时候,跨域是避不开的问题。总结就是如下:1.Cors我在做前后端分离的时候,会采用cors 的方法:便于其他源的调用接口,这个可以设置成任意的源头,也可以允许指定的源头。下面的是nodejs 做后台的一个示例://设置跨域访问 在做前后端分离,nodejs提供接口的时候,这个设置跨域请求必不可少 app.

前后端交互的时候,跨域是避不开的问题。

总结就是如下:

1.Cors

我在做前后端分离的时候,会采用cors 的方法:便于其他源的调用接口,这个可以设置成任意的源头,也可以允许指定的源头。

下面的是nodejs 做后台的一个示例:

//设置跨域访问  在做前后端分离,nodejs提供接口的时候,这个设置跨域请求必不可少
  app.all('*', function(req, res, next) {
     res.header("Access-Control-Allow-Origin", "*"); // 表示任意的源
    // res.header("Access-Control-Allow-Origin", "http://www.wtapi.wang"); // 只有这个网址
    res.header("Access-Control-Allow-Headers", "Content-Type, Access-Control-Allow-Headers, Authorization, X-Requested-With");
    res.header("Access-Control-Allow-Methods","PUT,POST,GET,DELETE,OPTIONS");
    res.header("X-Powered-By",'unknown')
    res.header("Content-Type", "application/x-www-form-urlencoded; charset=UTF-8");
    next();
});

2.nodejs 做中间层的路由转发

缺点,上线时候,必须启动nodejs 的服务。

 举个例子:本地有个接口 

http://127.0.0.1:8008/api/essayNote   这个接口返回字符串 'essay note'
 
现在要对这个接口进行转发,转发后的路由,
http://127.0.0.1:8009/api/apiturntest   这个接口也得返回字符串 'essay note'
 
 
现在用nodejs ,express 做路由转发,启动端口是 8009 端口,部分代码如下:
//路由转发的 转发nodejs 提供的接口
exports.apiturntest = function (req,res,next) {
  res.set('Content-Type', 'text/plain');
  request('http://127.0.0.1:8008/api/essayNote', (error, response, body) => {
    // res.send(res);
    res.json(body);
  })
}
app.get("/api/apiturntest",this.apiturntest);
request 是一个node 包,需要安装下 npm install request  ;var request = require ('request')
vue 项目中,axios http 请求服务 代码:
this.$http.get('http://127.0.0.1:8008/api/essayNote')
  // this.$http.get('http://127.0.0.1:8009/api/apiturntest')
.then(succ => {
   console.log(succ.data) 
 }, err => {
   console.log(err, 'err')
 })

请求成功:

用下面的接口,显示

注意: 因为node启动端口 8009 的一个服务,client端启动的端口是8001,调用这个接口也是跨域,因此在nodejs 转发路由的这个后端服务,也需要设置一下跨域:如上面的 cors 设置 header 的问题

res.header("Access-Control-Allow-Origin", " http://127.0.0.1:8001/"); 黑色字体部分有误 ,这样写的话,还是报以下错误:

 

res.header("Access-Control-Allow-Origin", "http://127.0.0.1:8001"); 这样写就OK了

 完整代码:https://github.com/adouwt/front-end.git

3. 做一下代理,将接口代理到本地再开发,可以使用一些代理工具

 

推荐博客:https://www.cnblogs.com/smyhvae/archive/2018/03/07/8523576.html

目录
相关文章
|
1月前
|
JavaScript 前端开发 程序员
前端学习笔记——node.js
前端学习笔记——node.js
37 0
|
3月前
|
JavaScript 前端开发 开发者
Vue.js 框架大揭秘:响应式系统、组件化与路由管理,震撼你的前端世界!
【8月更文挑战第27天】Vue.js是一款备受欢迎的前端JavaScript框架,以简洁、灵活和高效著称。本文将从三个方面深入探讨Vue.js:响应式系统、组件化及路由管理。响应式系统为Vue.js的核心特性,能自动追踪数据变动并更新视图。例如,通过简单示例代码展示其响应式特性:`{{ message }}`,当`message`值改变,页面随之自动更新。此外,Vue.js支持组件化设计,允许将复杂界面拆分为独立且可复用的组件,提高代码可维护性和扩展性。如创建一个包含标题与内容的简单组件,并在其他页面中重复利用。
77 3
|
2月前
|
存储 JavaScript 前端开发
前端 vue:路由的高级使用
前端 vue:路由的高级使用
|
13天前
|
前端开发 JavaScript 安全
揭秘!前端大牛们如何高效解决跨域问题,提升开发效率!
【10月更文挑战第30天】在Web开发中,跨域问题是一大挑战。本文介绍前端大牛们常用的跨域解决方案,包括JSONP、CORS、postMessage和Nginx/Node.js代理,对比它们的优缺点,帮助初学者提升开发效率。
37 4
|
1月前
|
JavaScript
Node.js 路由
10月更文挑战第5天
17 2
|
1月前
|
JavaScript 前端开发 API
前端技术分享:Vue.js 动态路由与守卫
【10月更文挑战第1天】前端技术分享:Vue.js 动态路由与守卫
|
2月前
|
资源调度 JavaScript 前端开发
前端vue:路由的基本使用
前端vue:路由的基本使用
|
1月前
|
JavaScript 前端开发 应用服务中间件
Vue开发中,在实现单页面应用(SPA)前端路由时的hash模式和history模式的区别及详细介绍
Vue开发中,在实现单页面应用(SPA)前端路由时的hash模式和history模式的区别及详细介绍
26 0
|
1月前
|
前端开发 JavaScript 程序员
【从前端入门到全栈】Node.js 之核心概念
【从前端入门到全栈】Node.js 之核心概念
|
1月前
|
Web App开发 JavaScript 前端开发
前端Node.js面试题
前端Node.js面试题