大白看过来-‘轻松‘解决跨域问题

前言：什么是跨域？

跨域就是当在页面上发送ajax请求时，由于浏览器同源策略的限制，要求当前页面和服务端必须同源，也就是协议、域名和端口号必须一致。

 如果协议、域名和端口号中有其中一个不一致，则浏览器视为跨域，进行拦截。

 

 解决跨域的方法

1.CORS方式解决跨域：

cors是跨域资源共享，是一种基于 HTTP 头的机制，该机制通过允许服务器标示除了它自己以外的其它 origin（域，协议和端口），使得浏览器允许这些 origin 访问加载自己的资源。服务端设置了Access-Control-Allow-Origin就开启了CORS，所以这种方式只要后端实现了CORS，就解决跨域问题，前端不需要配置。
服务端设置Access-Control-Allow-Origin响应头即可，服务端代码如下：

const http = require('http')
const url = require('url')
// 创建server
const server = http.createServer()
// 定义跨域访问白名单
const authOrigin = ['http://127.0.0.1:5500']

// 监听http请求
server.on('request', (req, res) => {
    const user = { // 模拟返回数据
        id: 1, 
        name: 'zhangsan',
        age: 12
    }
    const origin = req.headers.origin
    if(authOrigin.includes(origin)) {
        // 添加响应头，实现cors
        // res.setHeader('Access-Control-Allow-Origin', '*') // 允许所有的地址跨域访问
        res.setHeader('Access-Control-Allow-Origin', origin) // 只有白名单中的地址才可以跨域访问
    }
    res.end(JSON.stringify(user))
})

// 设置监听端口
server.listen(8081, function() {
    console.log('server is running on 8081 port！')
})

当客户端访问时服务端接口时，就可以看到响应头中服务端配置的Access-Control-Allow-Origin：

 2.搭建Node代理服务器解决跨域：

因为同源策略是浏览器限制的，所以服务端请求服务器是不受浏览器同源策略的限制的，因此我们可以搭建一个自己的node服务器来代理访问服务器。

大概的流程就是：我们在客户端请求自己的node代理服务器，然后在node代理服务器中转发客户端的请求访问服务器，服务器处理请求后给代理服务器响应数据，然后在代理服务器中把服务器响应的数据再返回给客户端。客户端和自己搭建的代理服务器之间也存在跨域问题，所以需要在代理服务器中设置CORS。

基本的工作流程如下

客户端代码如下: 

<!-- 引入axios发送请求 -->
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script>
    // 简单封装一个axios向代理服务器发送请求
    function proxyAxios(data) {
        return axios({
            url: 'http://localhost:8081/proxyApi', // 请求自己搭建的node代理服务器的地址
            method: 'POST',
            headers: { 'content-type': 'application/x-www-form-urlencoded' },
            data
        })
    }

    // 使用node代理服务器向服务器发送请求
    proxyAxios({
        url: 'https://class.imooc.com/getadver',// 需要代理访问真实服务器的url
        method: 'GET',
    }).then(res => {
        console.log('res:', res)
    }).catch(err => {
        console.log(err)
    })
</script>

node服务器代码如下：

/**通过nodeJS搭建自己的代理服务器来解决跨域问题 */
const axios = require('axios')
const express = require('express')
const bodyParser = require('body-parser')
const app = express()
// 使用第三方插件
app.use(bodyParser.urlencoded({extended: false}))
app.use(bodyParser.json())

// 监听post请求,处理代理接口
app.post('/proxyApi', (req, res) => {
    const {body} = req
	// 获取post请求的请求参数
    let reqParams = {}
	  for(const key in body) {
        reqParams = JSON.parse(key) // 获取到请求参数
    }

    // 设置响应头
    // 代理服务器设置CORS，允许跨域访问
    res.setHeader('Access-Control-Allow-Origin', '*') 
    res.setHeader('Access-Control-Allow-Methods', '*') // 允许所有的请求方式

    const {url, method = "GET", ...resConfig} = reqParams || {}
     // node代理请求服务器
     axios({
        url,
        method,
        ...resConfig
      }).then(result => {
        const {status, headers, data} = result
        res.status(status)
        res.setHeader('content-type', headers['content-type'])
        res.end(JSON.stringify(data)) // 给客户端返回数据
      }).catch(err => {
        res.end(JSON.stringify(err))
      })
})

// 监听请求
app.listen(8081, () => {
	console.log('服务启动成功，在8081端口监听请求....')
})

未完待续....其他方法之后依次补充(其实是其他的方法还没搞懂)