一般情况下跨域是通过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. 表格的td行利用css显示...

      默认超过指定长度以...显示, 鼠标放到文本上显示全 代码如下 .fh{ max-width:220px; word-wrap:break-word; text-overflow:ellipsis ...

  2. HTML 音乐

    <audio preload autoplay loop id="vd"> <source src="/static/audio/hua.mp3&quo ...

  3. linux下编译安装php5.6出现　configure: error: Cannot find MySQL header files under /usr/local/mysql.

    #yum install gcc gcc-c++ libxml2 libxml2-devel libjpeg-devel libpng-devel freetype-devel openssl-dev ...

  4. SoftwareTeacher直播自我感想

    今天老师发布了一个链接直播是关于:同学们聊聊学习软件工程,CS 课程的问题下面是我的个人感悟和笔记 一.编程技术的提升 编程并不是一件很难的事情,就如开车一样,只有多加练习,自己的技术才能提升上去.拿 ...

  5. 在线O(1)求逆元

    怎么还有厉害的在线O(1)求逆元,不过常数确实有点儿太大了 本文大部分搬运于这里 相信大家都做过 POJ2478 这道题吧,这道题的 Farey 序列 \(F_n\) 包含了分子分母不大于 \(n\) ...

  6. C# 静态成员和方法的学习小结

    C# 静态成员和方法的学习小结 数据成员:数据成员可以分静态变量.实例变量两种.静态成员:静态成员变量是和类相关联的,可以作为类中"共"有的变量(是一个共性的表现),他不依赖特定对 ...

  7. [C++] C++socket套接字网络通讯实例

    //服务器端:#include "winsock2.h"  #include <string>#pragma comment(lib, "ws2_32.lib ...

  8. Oracle在存储过程中建表、建索引权限不足

    修改存储过程,在存储过程名称后面添加 Authid Current_User 后执行通过. CREATE OR REPLACE PROCEDURE p_test Authid Current_User ...

  9. Java基础 （上）

    基础概念与常识 Java 语言有哪些特点? 简单易学: 面向对象(封装,继承,多态): 平台无关性( Java 虚拟机实现平台无关性): 支持多线程( C++ 语言没有内置的多线程机制,因此必须调用操 ...

  10. 关于.NET 6.0 Crossgen2的一些研究

    NET 6.0引入了Crossgen工具的后续版本Crossgen2,这个工具提供了程序提前(AOT)编译的能力. 什么是CrossGen? 我们日常开发时使用C#编译器CSC编译一个.NET程序集, ...