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

总结就是如下:

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. eDEX-UI

    eDEX-UI A science fiction terminal emulator disigned for large touchscreen that runs on all major OS ...

  2. nginx 前端POST请求405问题解决与排查过程

    问题描述 在请求时,f12提示POST请求报错405 环境描述 nginx转发至后端nginx,后端nginx转发至后端golang api接口 解决步骤 根据网上方法排查,发现80%以上无非就是以下 ...

  3. bzoj千题计划319:bzoj2865: 字符串识别(后缀自动机 + 线段树)

    https://www.lydsy.com/JudgeOnline/problem.php?id=2865 同上一篇博客 就是卡卡空间,数组改成map #include<map> #inc ...

  4. dependencies和devDependencies两者区别

    在npm生成的package.json文件中,有devDependencies和dependencies两个环境 devDependencies 用于开发环境(本地) dependencies 用于生 ...

  5. CC2541设置中断输入模式

    //P0.0 /* SW_6 is at P0.1 */#define HAL_KEY_SW_6_PORT P0#define HAL_KEY_SW_6_BIT BV(0)#define HAL_KE ...

  6. jQuery two way bindings(双向数据绑定插件)

    jQuery two way bindings https://github.com/petersirka/jquery.bindings 这是一个简单的jQuery双向绑定库. 此插件将HTML元素 ...

  7. iOS快捷代码块

    //数据请求 /**<#封装数据请求(只适用本人)#>*/ NSString * requestUrl = [NSString stringWithFormat:@"%@%@&q ...

  8. jq的css方法

    读属性: $(selector).css(name) 设置属性: 法一: $(selector).css(name,value) 法二: $(selector).css(name,function(i ...

  9. jquery正则表达式

    参考链接:  http://www.bkjia.com/Javascript/1084651.html

  10. AMD/CMD/CommonJs到底是什么?它们有什么区别?

    知识点1:AMD/CMD/CommonJs是JS模块化开发的标准,目前对应的实现是RequireJs/SeaJs/nodeJs.   知识点2:CommonJs主要针对服务端,AMD/CMD主要针对浏 ...