Vue.js 实现接口跨域请求,解决No 'Access-Control-Allow-Origin' 问题(设置代理方法)
2017-10-24| 程成| 5446| 8| Vue.js

我们可以通过设置代理解决跨域请求接口数据问题,也可以通过设置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调用接口的跨域问题。




×
作者:程成
QQ:492245711