Vue--记录一下今天学到的跨域问题

Vue2跨域：

要跨域，首先就要去访问服务器，访问接口。

使用  axios

1. 建vue2项目后，安装axios： cnpm install axios --save

2. 为axios封装一下（包括拦截器之类的）：

import axios from 'axios';

// 使用create 创建一个axios实力

const service = axios.create({

    baseURL: '/pk',   // 基础url，为vue.config.js中的proxy代理做准备

    timeout: 10000,

    responseType: 'json',  

    params: {},        // 公共参数，给每一个走代理的接口增加参数

    transformRequest: [function(data){

        return data

    }],   

    transformResponse: [function(data){

        return data

    }],   //  transformResponse` 在传递给 then/catch 前，可以对响应数据进行处理

    validateStatus: function(status){

        return status < 400 // 状态码小于400时均为成功（返回true）

    }, 

})

 

//  axios请求拦截器

service.interceptors.request.use(

    config=>{

        return config    // 一定要用return

    },

    err=>{

        return Promise.reject(err)

    }

)

//  axios响应拦截器

service.interceptors.response.use(

    response =>{

        return response  // 一定要用return

    }

)

export default service  //  记得暴露出去

3. axios准备好后，，准备一个测试用的接口:

const api = {

    getData: 'sales-representative/summary-by-sales',

}

export default api

export default api    // 记得暴露出去

4. axios和api都准备好了，为了在项目中更好地使用，所以，进行全局配置一下呗：

在main.js中：

import axios from "./utils/http";

import api from './utils/api';

Vue.prototype.$axios = axios

Vue.prototype.api = api

 （加粗的名字自己取好）

5. 小小测试一下：

在App.vue加入了这个：

mounted(){

    this.$axios.get(this.api.getData).then((res)=>{

        console.log(res);

    })

  }

结果：

 （蓝色框中可见，我的baseUrl已经加进去了，接下来，非常重要的一步，利用vue.config.js配置代理来解决跨域问题）

6. vue.config.js:

module.exports = {

    publicPath: process.env.NODE_ENV === 'development'?'':'',   //  这个东西关系到生产环境与开发环境，暂且不做记录，但在实际开发中，还要看测试环境与开发环境它们使用的接口是否一致，不一致到时还要增加配置。

    devServer:{

        host: '0.0.0.0',

        port: 8081,    //  Vue项目运行的端口

        proxy:{       

            '/pk':{        // 代理（我的理解：baseUrl增加代理名，这里读取代理名，有点像是标志。总的来说就是每个接口先给你加上/pk,然后再在这里读，读取之后，代理起作用，target就是识别到/pk后要访问的服务地址，当然，pathRewrite要将你访问的/pk替换掉，不然，8080不一定能接受到。。。。最后值得一提的是，target使用的是localhost，在实际开发中，不会这么写吧？？？？对的吧，对的吧）

                target: 'http://localhost:8080',

                ws: true,

                changeOrigin: true,

                pathRewrite:{

                    '^/pk': ''

                }

            }

        } 

    }

    

}

7. 最后测:

 当当，500了。。。

为什么会是这个错？？

因为，、

content-type不对啊，所以要么修改一下请求，响应数据类型吧？？ 

附上content-type对照表：https://tool.oschina.net/commons/   

最后，vue.config.js修改之后，记得重新运行一下，，嗯嗯。暂时没了。。。