vue中设置跨域

不同源则跨域，同源是指id,端口和协议都完全一致，否则就是跨域

跨域是浏览器的安全策略

跨域并不是指不能发起请求，也不是服务器没有响应，而是浏览器阻止你进行数据的操作

两种常见的实现跨域的方式

CORS跨域：服务器端跨域：就是在服务器设置允许跨域--前端中常用

app.use(function (req,res,next) {
    // 设置允许进行跨域请求的源，*代表所有域
    res.header("Access-Control-Allow-Origin", "*");
    res.header("Access-Control-Allow-Methods", "GET,PUT,POST,DELETE");
    res.header("Access-Control-Allow-Headers", "Content-Type");
    res.header("Access-Control-Allow-Credentials","true");
    next();
});

JSONP跨域：这种跨域需要服务器端的配合

本质是复用script标签的Src属性的天然跨域特性，发起请求的时候给服务器传递一个函数名称，服务器拼接数据，返回函数调用形式，客户端接收之后进行函数的调用执行。

• axios中压根不能实现跨域请求
• 如果需要发起跨域请求，我们得引入一个插件：vue-resource
  • vue-resource可以任意类型的请求，如get,post
  • 它还可以实现跨域请求
• 引入vue-resource之后，,通过use，就会自动的在vue实例上挂载一个成员：意味着我们需要先引入vue,再引入vue-resource

// 1.引入vue
import Vue from 'vue'
// 2.引入vue-resource
import vueResource from 'vue-resource'
// 3.让Vue使用vue-resource
Vue.use(vueResource)

跨域示例

getdata () {
    this.$http.jsonp('http://localhost:3003/getList')
        .then((data) => {
        console.log(data)
    }, (err) => {
        console.log(err)
    })
}