跨域

跨域

1. 什么是前端跨域？

跨域是浏览器为了安全做出的限制策略
浏览器请求必须遵循同源策略：同域名、端口、协议

跨域的三种方式：
1.CORS跨域
（在服务端设置，前端直接调用即可。即后台允许前端某个站点进行访问即可。请求的是XHR）
（npm i axios --save-dev
import axios from 'axios')

>  mounted(){
>    let url = "https://coding.imooc.com/class/ajaxsearchwords"
>    axios.get(url).then(()=>{
>    })
>  }

2.JSONP跨域 （常用）
（前端适配，后端配合。前后台同时改造。请求的是JS脚本）
（需安装jsonp插件 npm i jsonp --save-dev
import axios from 'axios'）

  mounted(){
    let url = "https://coding.imooc.com/class/ajaxsearchwords"
    jsonp(url,(err,res)=>{
         let result = res;
         this.data = result
       })
 }

3.代理跨域
（接口代理，通过修改nginx服务器配置来实现。前端修改，后端不动）
根目录下创建vue.config.js （遵循commonjs规范）

Request URL: https://coding.imooc.com/class/ajaxsearchwords?callback=searchKeys&_=1586142256816
选取问号前面的https://coding.imooc.com/class/ajaxsearchwords
去掉域名，后面的class与vue.config.js里的对应

getJsonp () {
      let url = "/class/ajaxsearchwords"
      jsonp(url,(err,res)=>{
        this.data= res;
      })
    },

vue.config.js文件内容

module.exports = {
  devServer:{
    host:'localhost',
    port:8080,
    proxy:{
      '/class':{  
        target:'https://coding.imooc.com',
        changeOrigin:false
      }
    }
  }
}

但是这样改成class会比较累赘。
故而在jsonp处的url改为let url = "/api/class/ajaxsearchwords"前面加上/api
vue.config.js处则改为：

proxy:{
      '/api':{
        target:'https://coding.imooc.com',
        changeOrigin:true,
        pathRewrite:{
          '/api':''
        }
      }
    }

就会变成Request URL: http://localhost:8080/api/class/ajaxsearchwords?callback=__jp0

2. 如何解决前端跨域？

这里是引用