vue本地开发环境配置跨域

什么是跨域

跨域指浏览器不允许当前页面的所在的源去请求另一个源的数据。源指协议，端口，域名。只要这个3个中有一个不同就是跨域

1. 协议跨域
http://a.baidu.com 访问 https://a.baidu.com；
2. 端口跨域
http://a.baidu.com:8080 访问  http://a.baidu.com:8081；
3. 域名跨域
http://a.baidu.com 访问 http://b.baidu.com；

解决方案（vue）

proxyTable：

找到项目config目录下面的index.js文件；
以豆瓣电影api为例，在proxyTable中添加如下代码。

'/mapi': {
    target: 'https://api.douban.com/v2/movie/', // api接口地址
    changeOrigin: true,
    pathRewrite: { // 路径重写，
        '^/mapi': '' // 替换target中的请求地址，也就是说以后你在请求http://api.douban.com/v2/movie/的时候直接写成/mapi即可。
    },
    onProxyReq: function(proxyReq, req, res) {
        console.log("原路径：" + req.originalUrl, "代理路径：" + req.path)
    }
}

如何使用？

movie.js

import request from '@/utils/request'
export function getMovieList(url, params) {
    return request({
        url: url,
        method: 'get',
        params
    })
}
``
`  
------------

#### douban.vue

`
``
javascript
import {
    getMovieList
} from "@/api/movie";

export default {
    name: "douban",
    data() {
        return {
            moviedata: null,
        };
    },
    methods: {
        getMoive: function(start, count) {
            // /mapi/top250 --> http://api.douban.com/v2/movie/top250
            getMovieList("/mapi/top250", {
                start: start,
                count: count,
                apikey: "0df993c66c0c636e29ecbb5344252a4a"
            }).then(res => {
                this.moviedata = res.subjects;
                console.log(res.subjects)
            });
        }
    }
};