前端须知的: 跨域

跨域

跨域问题是我们前端开发中经常会遇到的问题，也是面试中的高频题

跨域错误:不同源的ajax请求  当三个问题同时出现的跨域请求 才会出错

1. 请求响应双方url不同源 : 同源指的是:协议相同 域名相同 端口相同 都要相同才会同源  (服务器代理 可以解决)
2. 请求的类型必须是XHR请求 也就是常说的ajax请求  改发JSONP
3. 浏览器不安全 跨域问题出现的基本原因是浏览器的同源策略。同源策略是一个重要的安全策略，它限制一个origin的文档或者它加载的脚本如何能与另一个源的资源进行

 错误原因：不同源的ajax请求  后端还是能收到请求的，错误是发生在浏览器端

JSONP发送请求: with Padding，是一种借助于script标签发送跨域请求的技巧。它本质并不是ajax请求，所以没有跨域问题

        原理: script的src标签可以请求外部的js文件，这个请求不是ajax，它没有跨域问题借助 script 标签src请求服务端上的接口 服务端的接口返回JavaScript 脚本，并附上要返回的数据。

实现步骤:

1. 创建script标签并让src指向接口地址<script src="http://localhost:8000/get"></script>
2. 让接口返回函数调用表达式并传入数据  
3. 在前端准备相应的函数 <script>const fn = function(rs) { console.log(rs); }</script>

 

jQuery封装的jsonp

jQuery中的ajax已经封装好了的jsonp方式，可以直接使用。 具体来说就是给ajax请求添加一个dataType属性，其值为"jsonp"。 将后端的 res.json改为 res.jsonp  就不需要上面的方式了

CORS

        CORS是一个W3C标准，全称是"跨域资源共享"（Cross-origin resource sharing）。它允许浏览器向跨源服务器，发出XMLHttpRequest请求，从而克服了AJAX只能同源使用的限制。CORS需要浏览器和服务器同时支持。目前，所有浏览器都支持该功能，IE浏览器不能低于IE10(ie8通过XDomainRequest能支持CORS)。

手写实现

过在被请求的路由中设置header头，可以实现跨域。

 这种方案无需客户端作出任何变化（客户端不用改代码），就当跨域问题不存在一样。

app.get('/get', (req, res) => {
  // * 表示允许任何域名来访问
  res.setHeader('Access-Control-Allow-Origin', '*')
  // 允许指定源访问
  // res.setHeader('Access-Control-Allow-Origin', 'http://www.xxx.com')
  res.send(Date.now().toString())
})

 这种方案无需客户端作出任何变化（客户端不用改代码），就当跨域问题不存在一样。服务端响应的时候添加一个 Access-Control-Allow-Origin 的响应头

使用cors 

        来实现跨域 npm i cors   var cors = require('cors')    他也是个express中间件  app.use(cors())

当做express中的中间件，注意代码应该放在顶部

const express = require('express')
var cors = require('cors')

const app = express()

app.use(cors()) // 跨域

app.use(express.static('public'))
app.use(express.json())

app.get('/get',(req,res)=>{
    // res.setHeader('Access-Control-Allow-Origin', '*')
    console.log('get.....')
    res.json({msg:'get请求，ok'})
})

app.get('/getJSONP',(req,res)=>{
    console.log('get.....')
    res.jsonp({msg:'get请求，ok', data:{a:1,b:2}})
})

// app.get('/get',(req,res)=>{
//     console.log('get.....')
//     const data = {a:1,c:2,arr:[1,2,3]}
//     const fnStr = `fn(${ JSON.stringify(data) })`
//     res.end(fnStr)
//     // res.json({msg:'get请求，ok'})
// })
app.post('/postJSON',(req,res)=>{
    // res.setHeader('Access-Control-Allow-Origin', '*')

    console.log('接收到的数据是', req.body)
    res.json({msg:'ok', data: req.body})
})

app.listen(3000,()=>{
    console.log('3000');
})