跨域常见解决方案,浏览器的强缓存和协商缓存,工作中遇到比较难的问题,是怎么解决的?

518 阅读2分钟

跨域常见的解决方案

说起跨域,是浏览器的一种安全机制,只有存在协议,域名,端口,三者有一个不同则会出现跨域,跨域出现,请求是能发送到服务器的,只是数据无法拿到;
常见的处理方式有:

    1.node中间代理
        例如react中的做法:在和app.js同级创建一个setupProxy文件,代码如下
        const proxy = require('http-proxy-middleware')
        module.exports = function(app){
            app.use(
                proxy('/api1',{ //遇见/api1前缀,就会触发该代理配置
                    target:'http://localhost:5000', //请求转发给谁
                    changeOrigin:true, //控制服务器收到的响应头中Host字段的值
                    pathRewrite:{'^/api1':''} //重写请求路径
                })
            )
        }
    主要思路就是利用服务器和服务器之间不存在跨域的限制
    
    2.反向代理(nginx),这种做法更多是放在服务器实现
    3.跨域资源共享(CORS),这也是在服务器中实现的,主要做法是:
    在响应头设置:Access-Control-Allow-Origin: "*" , 如果写*代表所有的请求都能放行,通常都不会写*的,一般都是指定域名的
    4.H5新推出的有PostMessage()

简单描述浏览器的强缓存和协商缓存、

先说强缓存,指的是在缓存时间内,下次请求的时候,直接使用缓存,不在缓存时间内,则执行缓存策略,对应方法有:
Cache-contorl(相对值)-- http1.1的标准,Exprios(绝对值)--- http1.0的标准
当然强缓存也可以设置对应的时间(服务器可以设置"Cache-control","max-age = 3600")

其次就是协商缓存了,看到协商二字就不难想象出是要通过前后端商量共同配合实现的了,一般后端会通过返回状态码为 304 的方式通知前端
优先级:强缓存优先于协商缓存

工作中遇到比较难的问题,是怎么解决的?

这是开放性的问题,我目前遇到比较好的回答的是,在公司开发中,基本每天都会遇到难题,但是应用层面的难题,通过查资料,谷歌,英文翻译,百度,这一系列操作基本都能解决,最后还可以问公司大牛。