vue开发中的跨域问题

vue开发中的跨域问题

跨域产生的原因

跨域是因为浏览器的同源策略所导致，同源策略（Same origin policy）是一种约定，它是浏览器最核心也最基本的安全功能，同源是指：域名、协议、端口相同

http://host:port

在http协议中,host不同,port不同
在对后端数据进行请求时将会遇到 Access-Control-Allow-Origin
这就是出现跨域被浏览器拦截了

解决方案

在vue设置中使用代理将请求转发到指定的host:ip
开发阶段可以像下面这样配置
config/index.js中添加

module.exports = {
  dev: {
    // Paths
    assetsSubDirectory: 'static',
    assetsPublicPath: '/',
    proxyTable: {
      '/api':{
        target : 'http://host:port',	//代理url
        changeOrigin: true,
        pathRewrite: {
            '^/api': '/api'               // 重写
        }
      }
    },
    // 部署环境的ip
    // Various Dev Server settings
    host: 'localhost', // can be overwritten by process.env.HOST
    port: 8080, // can be overwritten by process.env.PORT, if port is in use, a free one will be determined
   	}
   } 

部署到服务器上时需要将host和port改为服务器的value
ps:在本地开发时候使用代理后请求的url还是

http://localhost:port

可以使用全局变量
创建文件/src/base.vue

// 全局url设置
<script>
const BASE_URL='http://localhost:8080'
export default{
BASE_URL
}
</script>

随后在app.vue挂载该vue文件
请求接口时
如axios等

url:this.GLOBAL.BASE_URL + "/api/"

部署到服务器时只需将BASE_URL和config/index.js中的value设置为服务器host:port即可正常使用