跨域-CORS

前端跨域解决方案

• 什么是前端跨域？
• 怎么解决前端跨域？
• 跨域是浏览器为了安全而做出的限制策略
• 浏览器请求必须遵循同源策略：同域名、同端口、同协议

---

• CORS跨域
• JSONP跨域
• 代理跨域

CORS跨域

CORS跨域 - 服务器设置，前端直接调用
说明：后台允许前端某个站点进行访问

1. 先在vue项目中安装axios，命令：cnpm i axios --save-dev
2. 在项目中导入import axios from ‘axios’

  mounted(){
    let url = "https://www.baidu.com/?tn=18029102_3_dg";
    axios.get(url).then(()=>{

    })
  },

JSONP跨域

• JSONP跨域 - 前端适配，后台配合
• 说明：前后台同时改造

先在前端项目中安装jsonp

npm install --save jsonp

在前端项目中调用jsonp并使用

<script>
// import axios from 'axios'
import jsonp from 'jsonp'

export default {
  name: 'app',
  components: {
  },
  data(){
    return {
      age:30,
      data: ''
    }
  },
  mounted(){
    let url = "https://www.imooc.com/activity/servicetime";
    jsonp(url, (res)=>{
      let result = res;
      this.data = result
    })
  },
}
</script>

代理跨域

• 接口代理 - 通过修改nginx服务器配置来实现
• 说明：前端修改，后台不动；

创建一个文件vue.config.js

module.exports = {
  devServer:{
    host:'localhost', 
    port:8080,
    proxy:{
      '/activity':{        //拦截
          target:'https://www.imooc.com',
          changeOrigin:false
      }
    }
  }
}

并修改访问路径

原理：当你访问/b的时候，底层会调用/a
为什么说，我们可以通过前台访问各个网站的接口，因为我们用的是node.js是后台，所以可以调用各个接口，就好像爬虫可以爬取各个网站一样，那么就可以在前台进行调用。