一般情况下跨域是通过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. cmd git的使用

    1:新建仓库 2: 克隆:

  2. 专业3 Cookie 和Session的使用及原理

    Cookie的使用及原理 什么是cookie cookie是一种用来跟踪和识别用户上网信息的会话控制技术,它将跟踪后的信息存储在客户端的浏览器上 cookie如何使用 第一步:设置cookie即可(告 ...

  3. vue全局引入公共scss样式，子组件调用

    前提 已引用并使用scss npm install sass-loader --save-dev npm install node-sass --sava-dev 配置 在vue.config.js中 ...

  4. LGP7840题解

    给出一种新的理解方式,本质上和正解是一致的. 首先我们现在已经有了一个森林,我们现在要给他加一条边,加哪一条边是最优的呢? 假设加的边是 \((u,v)\),那么 \(((d[u]+1)^2-d[u] ...

  5. LGP3708题解

    题面很直白,就不说了罢qaq 首先很明显,\(\sum_{i=1}^n x \bmod i = nx - \sum_{i=1}^n i\lfloor \frac x i \rfloor\) 这道题要是 ...

  6. (acwing蓝桥杯c++AB组）1.2 递推

    1.2 递推与递归 文章目录 1.2 递推与递归 位运算相关知识补充 pair与vector相关知识补充 题目目录与网址链接 下面的讲解主要针对这道题目的题解AcWing 116. 飞行员兄弟 - A ...

  7. 使用数据库连接工具DBeaver连接H2数据库

    H2数据库第一次听说,学习了. H2数据库自带了一个浏览器web操作,但是非常的不好用,用DBeaver看着好用多了. 1.点击带+的连接图标 2.选择ALL点击H2 Embedded.(如果本地没有 ...

  8. Java多线程之线程同步【synchronized、Lock、volatitle】

    线程同步 线程同步:当有一个线程在对内存进行操作时,其他线程都不可以对这个内存地址进行操作,直到该线程完成操作, 其他线程才能对该内存地址进行操作,而其他线程又处于等待状态,实现线程同步的方法有很多. ...

  9. 台式机ATX电源：各接口定义、启动方法、电源特点

    ATX,英文全称:Advanced Technology Extended,是一种由Intel公司在1995年公布的PC机主板结构规范. ATX电源作用是把交流220V的电源转换为计算机内部使用的直流 ...

  10. strcpy、strncpy 和安全的strncpy_s

    strcpy和strncpy摘于linux 内核源码的/lib/string.c char *self_strcpy(char *dest, const char *src) { char *tmp ...