我们可以通过设置代理解决跨域请求接口数据问题，也可以通过设置axios来解决。

跳转地址：Vue.js如何使用axios跨域访问数据

下面介绍如何使用设置代理方法解决跨域请求接口访问数据问题。

最近在写vuejs调用接口的时候，遇到了如下的问题：

 No 'Access-Control-Allow-Origin'

项目地址：http://pan.baidu.com/s/1geRzzKR    密码：ijiz

解决方法：

一、添加header方法

这是跨域问题，php解决跨域问题首先想到的是添加如下代码

header('Access-Control-Allow-Origin:*');

这个方法，我这里并没有生效，还是继续报跨域的错误。这里用第二种方法。

二、修改vuejs配置文件

开发环境是运行cnpm run dev的，我们修改build/webpack.dev.config.js配置文件

1、前台页面访问接口方法

export const apiLogin = (username,password,jobposition) => fetch('/v1/login/index',{
    username: username,
    password: password,
    job: jobposition
},'post');

这里的v1/login/index随你的接口访问地址定义。

fetch.js在饿了吗项目里有

http://pan.baidu.com/s/1eSbAOcM        密码：0xgg

2、在module.exports方法中添加如下

devServer: {
    historyApiFallback: true,
    contentBase: "./",
    quiet: true, //控制台中不输出打包的信息
    noInfo: false,
    hot: true, //开启热点
    inline: true, //开启页面自动刷新
    lazy: false, //不启动懒加载
    progress: true, //显示打包的进度
    watchOptions: {
        aggregateTimeout: 300
    },
    port: '8080', //设置端口号
    //其实很简单的，只要配置这个参数就可以了
    proxy: {
        "/v1": {
            target: "http://api.cc1021.com",
            pathRewrite: {"^/v1" : "/v1"},
            changeOrigin: true
        }
    }
}

3、重新运行cnpm run dev

vue的接口调用很强大，会隐藏你的真正的接口地址，不暴露，比普通的要安全很多。

注：如果你项目要打包上线，需要在nginx配置反向代理

server {  

    listen      80;  

    server_name  localhost;  

    location / {  

        rewrite ^/v1 你的目录 ;

    }  

} 

通过这个设置代理方法，可以解决vuejs调用接口的跨域问题。