JS

跨域是浏览器为了安全而做出的限制策略

同源策略：同域名、同端口、同协议

跨域的三要素：

1. 浏览器限制： 即浏览器对跨域行为进行检测和阻止
2. 同源策略三要素中有一个以上不同：如不同域名，不同端口，不同协议
3. 发起的是 xhr 请求： 即发起的是 XMLHttpRequest类型的请求

解决方案：

1. CORS 跨域（ 服务器端设置，前端直接调用 => 由后台控制前端的某个站点能否访问 ）

      this.axios.get("http://test/foodie-dev-api/index/carousel")
      .then(res=>{
        console.log(res)
      })
      .catch(res=>{
        console.log(res)
      })

2. JSONP 跨域　（ 前端适配，后台配合 => 前后端同时改造 ）

JSONP 可以跨域，但只能用 get 请求

引入 jsonp 后

      jsonp(" https://www.jianshu.com/users/recommended?seen_ids=&count=5&only_unfollowed=true",'',function (res) {
        console.log(res)
      })

注意：在 JS 中而不是 XHR

3. 代理跨域　　

在 vue.config.js 中

module.exports = {
    devServer:{
        host:'localhost',
        port:8080,
        proxy:{
            '/api':{
                target:'http://test/foodie-dev-api/',
                changeOrigin:true,
                pathRewrite:{
                    '/api':''
                }
            }
        }
    },
    // publicPath:'/app',
    // outputDir:'dist',
    // indexPath:'index2.html',
    // lintOnSave:false,
    productionSourceMap:true,
    chainWebpack:(config)=>{
        config.plugins.delete('prefetch');
    }
}

请求：

      this.axios.get("/index/carousel")
      .then(res=>{
        console.log(res)
      })
      .catch(res=>{
        console.log(res)
      })