3种跨域

三种跨域方式

1.  CORS跨域

服务端设置，前端直接调用

let url='httl://www.imooc. com/mock/user/login'
axios.get(url).then( res=> {
    
    
})

响应头Response Headers:
 Access-Control-Allow-Origin: http://localhost:8080  (后台允许这个url访问)
 Access-Control-Allow-Credentials:  true   （允许前端携带cookie过去）

2. JSONP跨域

前端适配（插件），后台配合 （同时改）

cnpm i jsonp --save-dev

import  jsonp from 'jsonp' （app.vue）

import jsonp from 'jsonp'
jsonp(url, (err, res) => {
    let result = res
    this.data = result

})

回调函数__jp0,函数参数是返回的数据。

浏览器的Network的XHR里面没有，在js中。实际请求的是js代码。

3. 接口代理--修改nginx服务器      Proxy跨域

前端修改，后台不动

建立vue.config.js

module.exports = {
    devServer: {
    host:'localhost',
    port: 8081,
    proxy: {
      '/api': {
        target: 'http://localhost:8081/#',
        changeOrigin: true,
        pathRewrite:{
          '/api':''      //把api后面的一截地址拼接到target后面，再转发
        }
      }
    }
  }

}

请求数据放在APP.vue 

mounted() {
  let url='https://www.imooc.com/user/login'
  jsonp(url ,( err, res) => {
    let result = res
    this.data =  result

  })
}