一般情况下跨域是通过ajax的方式请求数据，通过js在不同的域之间进行数据传输或者通信；

只有通过ajax方式获取请求的时候才会有跨域问题需要解决；

例如在本地模拟两个服务端。 一个服务端去通过ajax去请求另外一个服务端的数据的时候就会产生这个问题；

const express = require('express');

const path = require('path');

const app = express();

//托管静态资源

app.use(express.static(path.join(__dirname,'public')));  

//处理请求

app.get('/',(req,res)=>{

     res.sendFile(path.join(__dirname,'./跨域ajax.html'));

});

//处理ajax获取数据的路由

app.get('/blog',(req,res)=>{

     let blogs = require('./blog.json');

    res.json(blogs);

});

app.listen(3000,()=>{

    console.log('3000 is on');

})

URL的详细格式是

1.协议 http  https ftp  还有mongodb 等

2.身份验证 ftp协议中有，http和HTTPS是没有的

3.主机名 包括域名和ip两种形式；

4.端口

5.路径

6.查询字符串

7.哈希值

在jquery的ajax方法的请求url中，如果协议，主机名，端口号有任何一个不同，name就属于跨域；域名和ip也是不等的，例如127.0.0.1和localhost是不等的；

在web开发中，有一个著名安全 策略叫同源策略

使用ajax请求数据的时候，值允许同域的请求，非同域的请求一概拒绝

实现跨域请求一般三种方法。 通过cors  jsonp  代理

第一种方式比较局限，需要服务端的代码在我的控制方为之内，

后台提供的api我有权限去操作，只需要在服务端编写代码；浏览器端不需要编写任何代码；

第二张方式是使用jsonp json with packing  将json数据包裹起来，json 作为参数，进行函数调用并且返回；需要有权限编写服务端的代码。如果请求另外一个非自己网站，就不行了；一个提供数据服务来提供api接口。一个提供http服务来显示页面。jsonp的原理就是自己创建一个script标签，由于script标签可以请求别的地址不收到限制； 所以可以自己写函数来创建script标签，src属性则是需要跨域请求的地址；

function addScript(url){

   var script = document.createElement('script');

   script.src = url;

   document.body.appendChild(script);

}

第三种方式采用代理的方式， 可以获取其他接口的数据

代用代理的服务端代码如下

const express = require('express');

const path = require('path');

const http = require('http');

const app = express();

app.use(express.static(path.join(__dirname, 'public')));

app.get('/', (req, res) => {

    res.sendFile(path.join(__dirname, './ajax获取电影数据.html'));

});

app.get('/proxy', (req, res) => {

    //获取目标的url

    let url = req.query.url;

    //需要向目标url发送请求；

    //将数据请求回来

    http.get(url, (response) => {

        let str = '';

        //以流的方式接受数据

        response.on('data', (chunk) => {

            str += chunk;

        });

        response.on('end', () => {

            //接受所有数据之后，返回str

            res.json(str);

        });

    });

});

app.listen(3000, function() {

    console.log('App listening on port 3000!');

});

客户端代码如下

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <meta http-equiv="X-UA-Compatible" content="ie=edge">

    <title>Document</title>

    <script src="js/jquery-1.11.3.js"></script>

</head>

<body>

    <h2>get movie</h2>

    <button type="button" id="button">get movie</button>

    <script>

        $('#btn').on('click', function() {

            $.ajax({

                url: '/proxy',

                type: 'get',

                data: {

                    url: 'http://m.maizuo.com/v4/api/billboard/home?__t=1489757848973'

                },

                dataType: 'json',

                success: function(res) {

                    console.log(JSON.parse(res));

                }

            })

        })

    </script>

</body>

</html>

　　

基于nodejs中实现跨域的方法的更多相关文章

  1. JS中实现跨域的方法总结

    今天早上在地铁看了点基础知识的考察题,看到了一个JS跨域的问题,仔细想了想自己脑子里竟然只剩下jsonp跨域和用nginx反向代理进行跨域,想着还有别的几种方法,就是想不起来,这个人呢,一上岁数这个脑 ...

  2. web项目中的跨域问题解决方法

    一种是JSONP 一种是 CORS. 在客户端Javascript调用服务端接口的时候,如果需要支持跨域的话,需要服务端支持. JSONP的方式就是服务端对返回的值进行回调函数包装,他的优点是支持众多 ...

  3. 基于CORS的GeoServer跨域访问策略

    GeoServer的跨域访问问题,有多种解决方法,本文介绍一种基于CORS的GeoServer跨域访问方法. CORS简介 CORS是一个W3C标准,全称是"跨域资源共享"(Cro ...

  4. Springboot中关于跨域问题的一种解决方法

    前后端分离开发中,跨域问题是很常见的一种问题.本文主要是解决 springboot 项目跨域访问的一种方法,其他 javaweb 项目也可参考. 1.首先要了解什么是跨域 由于前后端分离开发中前端页面 ...

  5. js中各种跨域问题实战小结（二）

    这里接上篇:js中各种跨域问题实战小结(一) 后面继续学习的过程中,对上面第一篇有稍作休整.下面继续第二部分: -->5.利用iframe和location.hash -->6.windo ...

  6. js中各种跨域问题实战小结（一）

    什么是跨域?为什么要实现跨域呢? 这是因为JavaScript出于安全方面的考虑,不允许跨域调用其他页面的对象.也就是说只能访问同一个域中的资源.我觉得这就有必要了解下javascript中的同源策略 ...

  7. php中ajax跨域请求---小记

    php中ajax跨域请求---小记   前端时间,遇到的一个问题,情况大约是这样: 原来的写法: 前端js文件中: $.ajax({ type:'get', url:'http://wan.xxx.c ...

  8. 在ASP.NET 5应用程序中的跨域请求功能详解

    在ASP.NET 5应用程序中的跨域请求功能详解 浏览器安全阻止了一个网页中向另外一个域提交请求,这个限制叫做同域策咯(same-origin policy),这组织了一个恶意网站从另外一个网站读取敏 ...

  9. AJAX（XMLHttpRequest）进行跨域请求方法详解（一）

    注意:以下代码请在Firefox 3.5.Chrome 3.0.Safari 4之后的版本中进行测试.IE8的实现方法与其他浏览不同. 跨域请求,顾名思义,就是一个站点中的资源去访问另外一个不同域名站 ...

随机推荐

  1. 以QT为例谈环境搭建

    以QT为例谈环境搭建 作者:哲思 时间:2022.1.5 邮箱:1464445232@qq.com GitHub:zhe-si (哲思) (github.com) 前言 自从实习结束,好久没写博客了. ...

  2. GoLang设计模式21 - 装饰模式

    装饰器模式是一种结构型设计模式.通过装饰器模式可以为一个对象添加额外的功能而不需对其作出调整. 还是通过具体的案例来了解装饰器模式:假设我们开了一家披萨店,现在店里主营两款披萨: 素食狂披萨(Vegg ...

  3. 【python】GUI笔记

    1.Scrapy dmoz开放式人工目录.(1)创建项目:cmd-cd desktop Scrapy startproject pachong(2)parse接收 2.python如何实时爬取数据 3 ...

  4. tp 5 三级联动查询（自写）

    思路: 1.定义路由 2.查询顶级分类(pid=0)发送至制图 3.循环展示 4.给顶级分类下拉框绑定内容改变事件(JS:onchange.JQ:change) 5.获取到选中的option的valu ...

  5. php将一个字符串转变成键值对数组的效率问题

    有这样一种需求,将形式为"TranAbbr=IPER|AcqSsn=000000073601|MercDtTm=20090615144037"的字符串转换成如下格式的数组: Arr ...

  6. pandas常用操作详解——数据运算（一）

    表与表之间的数据运算 #构建数据集df1=pd.DataFrame(np.random.random(32).reshape(8,4),columns=list('ABCD')) df2=pd.Dat ...

  7. [递归回溯] LeetCode 504七进制数（摸鱼版）

    LeetCode 七进制数 前言: 这个就没什么好说的了 题目:略 步入正题 进位制转换 10 -n 余数加倒叙 没什么好讲的直接上七进制代码 偷个懒 10进位制转7 class Solution { ...

  8. VB、VBA、VBS的区别与联系

      概念 VB Visual Basic(简称VB)是Microsoft公司开发的一种通用的基于对象的程序设计语言,为结构化的.模块化的.面向对象的.包含协助开发环境的事件驱动为机制的可视化程序设计语 ...

  9. Python函数-5 生成器

    生成器有时候,序列或集合内的元素的个数非常巨大,如果全制造出来并放入内存,对计算机的压力是非常大的.比如,假设需要获取一个10**20次方如此巨大的数据序列,把每一个数都生成出来,并放在一个内存的列表 ...

  10. Docker——questions

    服务器的防火墙有什么用?(P14) Tomcat中的webapps.dist这一文件输出目录是用来做什么的?(P15) 容器之间实现数据共享的基础是要在主机有挂载的卷?