解决跨域篇

原创于 2021-10-29 19:05:32 发布 · 168 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #前端 #中间件

一、跨域

1.1 简介

使用ajax的时候，如果域/源不同，则会产生跨域。

不同域/不同源（指的一个意思）

跨域种类

在这里插入图片描述

1.2 CORS解决跨域

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-MsnsSJO9-1635505598839)(img/5-7cors.jpg)]

1.2.1 配置cors

1.2.1.1 Access-Control-Allow-Origin

语法：

 res.header('Access-Control-Allow-Origin', '*');

描述：默认情况下只能用域发送ajax请求。此属性可以设置哪个来源（ url ）可以请求。常常设置为 *

1.2.1.2 Access-Control-Allow-Methods

语法：

res.header('Access-Control-Allow-Methods', '*');

描述：默认情况下，CORS 仅支持客户端发起 GET、POST 请求。如果客户端希望通过 PUT、DELETE 等方式请求服务器的资源，则需要在服务器端，通过 Access-Control-Alow-Methods来指明实际请求所允许使用的 HTTP 方法。

1.2.2 cors中间件

(1)运行 npm install cors 安装中间件

(2)使用 const cors = require(‘cors’) 导入中间件

(3)在路由之前调用 app.use(cors()) 配置中间件

const express = require('express')
const app = express()
app.listen(3000, function () {
    console.log('3000端口开启了，可以访问: http://localhost:3000')
})

app.use(express.urlencoded({ extended: false }))
app.use('/static', express.static('static'))

// app.use( (req,res,next)=>{
//     // res.header('Access-Control-Allow-Origin','http://127.0.0.1:5500')
//     res.header('Access-Control-Allow-Origin','*') // * 任意源
//     res.header('Access-Control-Allow-Methods','*') //* 任意方法
//     next()
// } )
// 使用cors第三方中间件
//1. 下载 ，npm i cors
//2. 引入
const cors = require('cors')
//3. 使用
app.use( cors() )


app.get('/demo1',(req,res)=>{
    // 服务器要通过响应头告诉浏览器可以跨域。 Origin：来源
     //允许哪个来源可以访问此路由
    //res.header('Access-Control-Allow-Origin','http://127.0.0.1:5500')
    //res.writeHead()
 
     res.send('get-demo1')
 })

 
 app.get('/demo2',(req,res)=>{
    // 服务器要通过响应头告诉浏览器可以跨域。 Origin：来源
     //允许哪个来源可以访问此路由
    //res.header('Access-Control-Allow-Origin','http://127.0.0.1:5500')
    //res.writeHead()
 
     res.send('get-demo2')
 })

 app.post('/demo3',(req,res)=>{
   
    res.send('post-demo3')
})

app.delete('/demo4',(req,res)=>{
   
    res.send('delete-demo4')
})
app.put('/demo5',(req,res)=>{
   
    res.send('put-demo5')
})

工作方式

前端只负责html、css、js的特效交互。ajax请求的数据交互

后端只负责写接口（路由和返回的数据），后端就无需为html定义路由了。

而这种模式：专业的说叫前后端分离。

1.3 JSONP解决跨域：了解

目标：需要掌握原理，面试的时候能答上来即可。

1.3.1 原理

和ajax一点关系也没有。它是使用script的src请求实现的jsonp。因为script没有跨域一说，可以请求任意地址。

json + padding。这个padding在我们这里指的是把json数据padding：填充到前端html页面中

请求的时候，回调函数一定是在前端定义的，并且还要把回调函数的名字给后端，而且后端返回的格式：

回调函数名( JSON数据 )
整体这个格式是给前端的，这个格式就是jsonp格式 。

1.3.2 特点/缺点

只能发送get请求。

1.3.3 雏形

html页面

 <!-- 
        jsonp就是这样的格式
     -->
    <script>
        function fn1(){
            console.log('my is 04.html中的fn1')
        }
    </script>

    <script src="04.js"></script>

这是script的src请求的04.js中的代码

fn1()

1.3.4 完整

 <div id="content">
            <!-- 姓名：xxx
            <hr>
            年龄：xxx -->
    </div>
    <button id="btn">获取数据</button>

    <script>

        var oBtn = document.getElementById('btn')
        var oContent = document.getElementById('content')


        //封装一个函数，就是拼接字符串
        function fn1( result ){
            //2. 根据数据拼接字符串
            //console.log(result,'我们的数据')
            let htmlStr = `
            姓名：${result.username}
            <hr>
            年龄：${result.age}
            `
            //3. 渲染
            // console.log( htmlStr )
            oContent.innerHTML = htmlStr
        }


        oBtn.onclick = function(){
            // alert('ok')
            //1. 获取数据：请求接口
            // let person = {
            //     username:'李四',
            //     age:15
            // }
            //fn1( person )
            //1. 创建script标签
            let oScript = document.createElement('script')
            
            //2. 设置真正的请求地址
            oScript.src = '05.js'
            // console.log( oScript )
            //3. 放到页面中才会请求
            //把script放到body中才会真正的发请求
            document.body.appendChild( oScript )
        }
    </script>

05.js

let person = {
    username:'王2',
    age:15
}
fn1( person )

二、Promise与Ajax

2.1 使用promise封装ajax

2.2 使用封装好的方法发送ajax

document.body.appendChild( oScript )
}


05.js 

```js
let person = {
    username:'王2',
    age:15
}
fn1( person )