利用Vue-cli中的proxyTable解决开发环境的跨域问题

什么是跨域？
同源策略规定了如果两个 url 的协议、域名、端口中有任何一个不等，就认定它们跨源了。本文主要和大家介绍了vue-cli项目中的proxyTable跨域问题小结，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧，希望能帮助到大家。

u=1746889848,3864938039&fm=173&app=25&f=JPEG.jpg

跨域的解决方式有哪几种？

1.JSONP 是 JSON with padding（填充式 JSON 或参数式 JSON）的简写。
2.cros跨域
3.hash + iframe
4.postMessage
5.WebSockets

但是在实际工作中，前后端配合并不是那么默契，如果后台只给我接口，不能修改后台，怎么跨域？
在vue项目和react项目中的config文件中，都有一个proxy代理设置，这个就是用来在开发环境下进行跨域的。对其进行设置就能实现跨域。
通过vue-cli脚手架搭建出来的项目,修改config文件夹下的index.js中的proxyTable就能实现：

 proxyTable: {
            '/api': {
                /*
                 *这里理解成用‘/api'代替target里面的地址，后面组件中我们调接口时直接用api代替即可。
                 *比如我要调用'https://sus.secoo.com/user/add'
                 *在这里直接写'/api/user/add'即可
                 */
                target: 'https://sus.secoo.com',
                changeOrigin: true, //允许跨域 
                secure: false, // 如果是https接口，需要配置这个参数
                headers: {
                    Referer: 'https://sus.secoo.com'
                },
                pathRewrite: {
                    '^/api': '/api'
                        /*
                         *这里的配置是正则表达式，以/api开头的路径/api将会被‘https://sus.secoo.com'替换掉
                         *假如后台文档的接口是 "https://sus.secoo.com/user/add"
                         *前端调取API接口应写：axios.get('/api/user/add')
                         */
                }
            }
        },

参考文章：
vue-cli项目中的proxyTable跨域问题
利用Vue-cli中的proxyTable解决开发环境的跨域问题