一般情况下跨域是通过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. tp6微信公众号开发者模式基础消息

    官方文档 https://developers.weixin.qq.com/doc/offiaccount/Message_Management/Receiving_standard_messages ...

  2. webug 4.0 打靶笔记-01

    webug 4.0 打靶笔记 1. 显错注入 1.1 访问靶场 1.2 判断注入点 查找一切有参数传入的地方进行测试,注意到有get传参?id=1 猜测后台php中sql语句模板可能为如下几种情况 $ ...

  3. options has an unknown property 'modifyVars'. These properties are valid: 处理方法

    webpack 编译时提示 ValidationError: Invalid options object. Less Loader has been initialized using an opt ...

  4. python基础之序列类型的方法——字符串方法

    python基础之序列类型的方法--字符串方法 Hello大家好,我是python学习者小杨同学,经过一段时间的沉淀(其实是偷懒不想更新),我终于想起了自己的博客账号,所以这次带来的是序列方法的后半部 ...

  5. 分布式搜索引擎Elasticsearch的架构分析

    一.写在前面 ES(Elasticsearch下文统一称为ES)越来越多的企业在业务场景是使用ES存储自己的非结构化数据,例如电商业务实现商品站内搜索,数据指标分析,日志分析等,ES作为传统关系型数据 ...

  6. wifi钓鱼

    无线网络的加密方式和破解方式 1.WEP加密及破解 1).WEP加密方式 有线等效保密(wired euivalent pricacy,WEP)协议的使用RC4(rivest cipher4)串流加密 ...

  7. Poco实体

    在Poco实体中,一般只有属性没有方法,这在软件设计中称为贫血模型, 在DDD领域驱动设计中,提倡充血模型,即你的Poco实体中,即有属性,也有操作属性的方法,[PS:注意这里说的是操作属性的方法,你 ...

  8. SpringCloudAlibaba 微服务讲解（一）微服务介绍

    微服务介绍 1.1 系统架构的演变 随若互联网的发展,网站应用的规模也在不断的扩大,逬而导致系统架构也在不断的进行变化.从互联 网早起到现在,系统架构大体经历了下面几个过程:单体应用架构一蟻直应用架构 ...

  9. Java中实现多态的机制是什么？

    Java允许父类或接口定义的引用变量指向子类或具体实现类的实例对象,而程序调用的方法在运行时才动态绑定,就是引用变量所指向的具体实例对象的方法,也就是内存里正在运行的那个对象的方法,而不是引用变量的类 ...

  10. maven在idea中的一点使用技巧

    maven在idea中的一点使用技巧 idea已经支持将参数的意思也展示出来,确实很方便. -U是强制拉取,因为如果拉取某个jar包,失败了,那么在一段时间内,idea不会重试,除非指定-U. -X呢 ...