nodeJs--跨域

---

一、什么是跨域?

产生跨域问题是由于浏览器的同源策略限制。
什么是浏览器的同源策略：
浏览器的一种安全策略: 指 两个网址的协议ip:port(端口) 三者一样代表同源
浏览器为了用户的信息安全,网页中有一个网络请求技术:AJAX 在网络请求时;请求的网址和当前页面的网址不是同一台服务器,就会被拒绝接受服务器发送的数据。也就是ajax请求才会有这种跨域问题
比如：

二、解决跨域

1.CORS（跨域资源共享）技术

在数据包的头部配置Access-Control-Allow-Origin字段以后,数据包发送给浏览器后
浏览器就会根据这里配置的白名单 “放行” 允许白名单的服务器对应的网页来用ajax跨域访问
注意：跨域请求时，前端是请求了跨域的后端,只是返回的数据被浏览器拒收了,并不是跨域了就不发网络请求
方法一：直接在自己服务器的js文件设置

res.setHeader("Access-Control-Allow-Origin","*")  //第二个参数代表都能访问这个数据，也可以设置服务器地址指定谁能访问
res.end('{"name":"ljy",age:22}')

案例: 当我我要访问8080端口的数据

//这是在8081端口打开的html文件
    <button onclick="fn()">点击请求百度首页</button>
    <script>
        function fn(){
            let xhr=new XMLHttpRequest()||new ActiveXObject("Microsoft.XMLHTTP")
            xhr.open("GET","http://localhost:8080/ajax1",true)
            xhr.send()
            xhr.onreadystatechange=function(){
                if(xhr.readyState==4){
                    console.log(xhr.responseText)
                }
            }
        }

这是8080端口服务器js文件
var http = require("http")
http.createServer((req, res) => {
      if (req.url=="/ajax1") {
            res.setHeader("Access-Control-Allow-Origin", "*")
            res.end('{"name":"ljy",age:22}')
      }
}).listen(8080)

可以看到当我们点击了按钮就请求到了8080端口的数据

2.JSONP

前端网页中用ajax请求跨域服务器的网址 ,会报跨域错误
用script标签的src属性去请求跨域服务器的网址不会报跨域错误,但是会直接把请求过来的编码用v8引擎去运行,所以我们需要封装函数通过dom操作来把请求的数据添加到网页上。

1.在后端写一个js引擎能识别的字符串发送给前端,这个字符串是这样的:’ fn({“name”:“ljy”}) ’

2.前端直接通过script标签的src属性去请求这个网址,请求完毕以后 v8就会直接运行这个编码去调用fn函数,所以必须提前创建这个函数，然后将它放在要执行的业务函数中等待被调用。

3.函数的名称问题: 前端可以通过querystring把函数名以参数的形式发送给后端,后端解析了以后直接拼接到数据中，然后发送给前端。

4.通过dom操作创建script节点并为其设置src属性去请求这个网址，然后将script标签添加到页面上。

首先在请求的服务器端设置 我使用的本机8080端口作为请求的服务器端，8081端口作为前端的服务器。

//8080服务器端
var http = require("http")
var url=require("url")
http.createServer((req, res) => {
      var pathname=url.parse(req.url).pathname   
      if (pathname=="/car") {
            let querystr=url.parse(req.url,true).query.callback    //接受前端发送的函数名称
            var obj={"name":"ljy",age:22}
            var jsonstr=JSON.stringify(obj)
            res.end(`${querystr}(${jsonstr})`)
      }
}).listen(8080)

//8081服务器前端
    <button onclick="myload()">点击请求8080端口</button>
    <script>
         function myload(){
             let myname="ljy"+new Date().getTime()
             window[myname]=function(data){
                console.log(data)
             }
             let myscript=document.createElement("script")
             myscript.src=`http://localhost:8080/car?callback=${myname}`
             document.body.append(myscript)
         }

3.Proxy代理

在开发阶段 最常用的手段,比如Vue,React,等前端框架中常常有一个自己的开发服务器 ，如果用户访问我们的A服务器的网页,网页内部的AJAX 去请求A服务器的数据接口,是不会跨域的，然后A服务器去请求B服务器的数据,再把返回给A服务器的数据 返回给用户。在这里A服务器就是一个代理服务器

这里我们后端使用的是request模块去发送请求。这是第三方模块需要手动下载

1.安装request模块
npm i request

2.使用request模块

var http = require("http")
var url=require("url")
var request=require("request")   //引入request模块
http.createServer((req, res) => {
      var pathname=url.parse(req.url).pathname
      if (pathname=="/car") {
            request("http://localhost:8081/home.html",(arg1,arg2,arg3)=>{
                  res.end(arg3)    //第一个参数为请求的网址，第二个参数为回调函数
            })
      }
      
}).listen(8080)

localhost:8081/home.html文件如下