说说同源策略，跨域的解决办法

跨域 --请求如果触发了同源策略就会出现跨域问题。 A网页设置的 Cookie，B网页不能打开 同源就是--协议 ，域名，端口相同。

跨域（1.在浏览器中 2.请求后端接口 3.同源策略）是由于浏览器的同源策略所导致的，浏览器的同源策略是指只有“协议、域名、端口”相同我们才能进行通信，当有一个不满足的时候，我们就无法进行跨域。

目的：同源政策保证用户信息安全，防止网站恶意窃取数据 限制范围 如果非同源，有三种行为受限。

• Cookie ,LocalStorage,IndexDB无法读取
• Dom 无法获得
• AJAX 请求不能发送

解决方法

一.针对cors或者Proxy两种开展。

（1）cors（跨域资源共享）主流简单-后端配置响应头，允许资源共享,克服了ajax只能同源使用的限制

分为简单请求（GET、POST、HEAD）和预检请求

const app = express()
//解析json格式请求体
app.use(express.json())
//解析查询字符串格式的请求体
app.use(express.urlencoded({ extended: true }))
//1.使用中间件函数来设置cors允许资源共享
app.use((req.res.next) => {
    //设置响应头，告诉浏览器任何地址都可以访问这个接口
    res.setHeader('Access-Cosntrol-Allow-Origin', '*')
    //告诉浏览器支持这些方式
    res.setHeader('Access-Cosntrol-Allow-Methods', 'Get,Post,Delete,Put')
    next()
})
//第二种 推荐使用插件
const cors = require('cors')
app.use(cors())

（2）.JSONP(前后端配合)。

原理：通过script标签的src发送请求没有跨域限制来获取资源 注意 JSONP只支持get请求，不支持Post,请求回来的东西当作js执行。 不使用的原因 ：假如提供JSONP的服务存在漏洞，返回的js内容被人控制就会很危险。

（3）.Proxy(前端解决：只适用本地开发环境，上线解决不了，直接把dist放在后端服务器里)。

原理请求发送了以后，浏览器把请求拦截给到给到代理服务器，代理服务器（/api打头）有再给到服务器（因为服务器之间的请求不存在跨域）

module.exports = {
    devServer: {
        //代理配置
        Proxy: {
            //如果请求头以/api打头，就出触发代理机制
            '/api': {
                target: '/.....'
            }
        }
    }
}

通过axios发请求配置根路径axios.defaults.baseURL='/api'相对地址 ）

• JSONP、CORS、WEBPACK配置
• JSONP，需要前后端配合--利用了 script 标签不受浏览器的同源策略影响的性质来做的，当然还需要前后端的配合

1. 客户端事先准备一个接收数据的全局函数
2. 客户端解析道外联的Script标签，发出请求
3. 服务端收到请求，返回函数的调用
4. 客户端收到数据，执行回调。

• CORS--实现CORS通信的关键是服务器。只要服务器实现了CORS接口，就可以跨源通信。

const express = require('express')
const cors = require('cors')
const server = express()
server.use(cors())
server.get('/list', (req, res) => {
    res.send({
        code: 1, msg: '请求成功'
    })
})
server.post('/info', (req, res) => { res.send({ code: 1, msg: '请求成功' }) })
server.listen('8081', () => console.log('接口服务器开启成功'))