jsonp和cors解决跨域

JSON(JavaScript Object Notation) 是一种轻量级的数据交换格式。对于JSON大家应该是很了解了吧，不是很清楚的朋友可以去json.org上了解下，简单易懂。

1.什么是跨域

要了解跨域，先说说同源策略。同源策略是 Netscape 公司提出的一个著名的安全策略，所有支持 JavaScript 的浏览器都会使用这个策略。所谓同源是指，域名，协议，端口相同。当页面在执行一个脚本时会检查所访问的资源是否同源，如果非同源，那么在请求数据时，浏览器会在控制台中报一个异常。拒绝访问。

2.jsonp实现原理

利用在页面创建

// 导入模块
const express = require('express')
const app = express()
app.get('/json',(req,res)=>{
    // 结构
    const {callback} =req.query
    const obj = {
        name:'fs',
        age:12
    }
    // 转为查询字符串
    res.send(`${callback}(${JSON.stringify(obj)})`)
})

app.listen(3001,()=>{
    console.log('完成');
})

<script>
   function fn(res){
       console.log(res);
   }
</script>
<script src="http://localhost:3001/json?callback=fn"></script>

3.cors实现原理

cors 是 Express 的一个第三方中间件.通过安装和配置 cors 中间件，可以很方便解决跨域问题。

• 使用步骤
  • 安装中间件：npm i cors
  • 导入中间件：`const cors = require('cors')
  • 配置中间件：在路由之前调用app.use(cors())
• 案例代码

// 导入 express 模块
const express = require('express')

// 创建 express 的服务器实例
const app = express()

// 导入中间件
const cors = require('cors')
// 配置中间件
app.use(cors())

// 配置解析表单数据的中间件
app.use(express.urlencoded({ extended: false }))

// 导入路由模块
const router = require('./020-apiRouter')
// 把路由模块，注册到 app 上
app.use('/api', router)

// 调用 app.listen 方法，指定端口号并启动 web 服务器
app.listen(3000, () => {
  console.log('running……')
})