我们可以通过设置代理解决跨域请求接口数据问题,也可以通过设置axios来解决。
下面介绍如何使用设置代理方法解决跨域请求接口访问数据问题。
最近在写vuejs调用接口的时候,遇到了如下的问题:
No 'Access-Control-Allow-Origin'
项目地址:http://pan.baidu.com/s/1geRzzKR 密码:ijiz
解决方法:
这是跨域问题,php解决跨域问题首先想到的是添加如下代码
header('Access-Control-Allow-Origin:*');
这个方法,我这里并没有生效,还是继续报跨域的错误。这里用第二种方法。
开发环境是运行cnpm run dev的,我们修改build/webpack.dev.config.js配置文件
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
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 } } }
vue的接口调用很强大,会隐藏你的真正的接口地址,不暴露,比普通的要安全很多。
注:如果你项目要打包上线,需要在nginx配置反向代理
server {
listen 80;
server_name localhost;
location / {
rewrite ^/v1 你的目录 ;
}
}
通过这个设置代理方法,可以解决vuejs调用接口的跨域问题。