前端跨域学习笔记

跨域产生的原因

• 在浏览器中如果两个URL的协议、域名，ip地址和端口不相同，互相访问时会发生跨域
• 浏览器中 script、img、iframe、link等标签都可以加载跨域资源，而不受同源限

解决方案 jsonp cors 代理服务器

• jsonp 只能处理get请求，原理就是生成可加载跨域资源的jsonp标签

• cors，后端处理不加赘述

• 代理服务器

  原理：在浏览器之间存在跨域问题，但是在服务器之间就不存在这个问题;

  所以我们模拟一个本地服务器，作为中转站，进行资源访问的中转；

const proxy = require('http-proxy-middleware');

module.exports = {   
devServer:{
    host: 'localhost',//target host
    port: 8080,
    //proxy:{'/api':{}},代理器中设置/api,项目中请求路径为/api的替换为target
    proxy:{
        '/api':{
            target: 'http://192.168.1.30:8085',//代理地址，这里设置的地址会代替axios中设置的baseURL
            changeOrigin: true,// 如果接口跨域，需要进行这个参数配置
            //ws: true, // proxy websockets
            //pathRewrite方法重写url
            pathRewrite: {
                '^/api': '/' 
                //pathRewrite: {'^/api': '/'} 重写之后url为 http://192.168.1.16:8085/xxxx
                //pathRewrite: {'^/api': '/api'} 重写之后url为 http://192.168.1.16:8085/api/xxxx
           }
    }}
},
//...
}