正文

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

IP云
IP云V管理员/3 阅读
11/01
提示：扫一扫查出行
【扫一扫了解最新限行尾号】
复制提示

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

总结就是如下：

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

前端跨域问题的总结&&nodejs 中间层的路由转发的更多相关文章

  1. 搞懂：前端跨域问题JS解决跨域问题VUE代理解决跨域问题原理

    什么是跨域 跨域:一个域下的文档或脚本试图去请求另一个域下的资源 广义的跨域包含一下内容: 1.资源跳转(链接跳转,重定向跳转,表单提交) 2.资源请求(内部的引用,脚本script,图片img,fr ...

  2. REST API之前端跨域访问

    关键字:跨域访问,cross-origin, NodeJS, REST API, JavaScript, Access-Control-Allow-Origin 1.新建并运行一个 NodeJS的se ...

  3. 前端跨域（二）：JSONP

    上一篇文章 前端跨域(一):CORS 实现了跨域的一种解决方案,IE8 和其他浏览器分别通过 XDomainRequest 和 XHR 对象原生支持 CORS.这次我将补一补 Web 服务中也非常流行 ...

  4. 前端跨域（一）：CORS

    上周做了一个移动端表单提交的页面,其中涉及到了跨域问题,想来也是惭愧,因为之前一直都没有遇到过这个问题,因此都没有深入探索过,只是知道有哪几种方式,这次终于借这个机会可以把遗留的知识点补一补了. 1. ...

  5. JAVA解决前端跨域问题。

    什么是跨域? 通俗来说,跨域按照我自己的想法来理解,是不同的域名之间的访问,就是跨域.不同浏览器,在对js文件进行解析是不同的,浏览器会默认阻止,所以 现在我来说下用java代码解决前端跨域问题. 用 ...

  6. 用nginx的反向代理机制解决前端跨域问题在nginx上部署web静态页面

    用nginx的反向代理机制解决前端跨域问题在nginx上部署web静态页面 1.什么是跨域以及产生原因 跨域是指a页面想获取b页面资源,如果a.b页面的协议.域名.端口.子域名不同,或是a页面为ip地 ...

  7. 项目部署问题：xftp无法连接服务器、Nginx403 Forbidden解决、nginx反向代理解决前端跨域问题

    一.xftp无法连接服务器 在xftp中配置正确的ip,用户名和密码后,居然无法连接 解决方案:将协议里面的FTP换成SFTP,注意换成SFTP后端口就默认换成22,要还是原来的21就还是连不上的哈 ...

  8. 解决vue+springboot前后端分离项目,前端跨域访问sessionID不一致导致的session为null问题

    问题: 前端跨域访问后端接口, 在浏览器的安全策略下默认是不携带cookie的, 所以每次请求都开启了一次新的会话. 在后台打印sessionID我们会发现, 每次请求的sessionID都是不同的, ...

  9. 完美解决前端跨域之 easyXDM 的使用和解析

    前端跨域问题在大型网站中是比较常见的问题.本文详细介绍了利用 easyXDM 解决前端跨域的原理细节和使用细节,具体使用时可以在文中代码实例的基础上扩展完成. 0.背景 因个别网络运营商存在 HTTP ...

随机推荐

  1. html body 100%

    html body 100% html <div class="header"> </div> <div class="main" ...

  2. HDU - 6313 Hack It（构造）

    http://acm.hdu.edu.cn/showproblem.php?pid=6313 题意 让你构造一个矩阵使得里面不存在四个顶点都为1的矩形,并且矩阵里面1的个数要>=85000 分析 ...

  3. vue2.0 子组件 父组件之间的传值

    常用的子组件给父组件传值/调父组件方法 //子组件let val = "";//可以是任意类型this.$emit('fatherFun', val); //父组件<fath ...

  4. android的android.intent.action.MAIN

    当我们使用Android Studio创建一个工程并生成一个Activity时,经常可以在清单文件中看到如下的代码 android.intent.action.MAIN:决定应用的入口Activity ...

  5. MVC设置启动页

    设置启动页需要在路由中添加一段代码: public static void RegisterRoutes(RouteCollection routes)        {            rou ...

  6. 大规模数据导入和导出（sqlserver）

    请期待... https://docs.microsoft.com/en-us/sql/linux/sql-server-linux-setup-tools#RHEL msodbcsql-13.1.6 ...

  7. oracle pivot

    select * from (select a.drugname, a.drugform, a.drugspec, a.type flag, max(a.maxzjprice) maxprice, m ...

  8. java Object类的公共方法

    1.HashCode();      2. wait();  3. notify(); 4.equals(); 5.getClass(); 6.toString(); 7.clone(); 8.fin ...

  9. python笔记(一)获取当前目录路径和文件

    一.获取当前路径 1.使用sys.argv[0] import sys print sys.argv[0]#输出#本地路径 2.os模块 import os print os.getcwd() #获取 ...

  10. #6278. 数列分块入门 2（询问区间内小于某个值 xx 的元素个数）

    题目链接:https://loj.ac/problem/6278 题目大意:中文题目 具体思路:数列分块模板题,对于更新的时候,我们通过一个辅助数组来进行,对于原始的数组,我们只是用来加减,然后这个辅 ...