vue-resource 跨域请求
1、客户端:
(1)在webpack.config.js(config—>index.js)文件里设置代理(可以同时设置多个)
dev: { env: require('./dev.env'), port: 8080, //设置访问的端口号 autoOpenBrowser: true, //自动打开浏览器 assetsSubDirectory: 'static', assetsPublicPath: '/', proxyTable: { '/api': { target: 'http://localhost:8888', //设置调用接口域名和端口号别忘了加http changeOrigin: true, pathRewrite: { '^/api': '/' //这里理解成用‘/api’代替target里面的地址,组件中我们调接口时直接用/api代替 // 比如我要调用'http://0.0:300/user/add',直接写‘/api/user/add’即可 代理后地址栏显示/ } } }
...
(2)在组件中编辑(下面是POST方法,GET方法也一样)
this.$http.post("http://localhost:8888/login?user=blue&pass=123456") .then(function(response) { console.log("成功"); console.log(response.body); }, function(response) { console.log("失败"); console.table(response); }); //或者使用axios(记得安装和引入axios模块) import axios from "axios" axios.get("api/login?user=blue&pass=123456") .then(function(response) { console.log("成功"); console.log(response.data); }, function(response) { console.log("失败"); console.table(response); });
2、服务端:
nodeJS 用express作为服务端
server.use('/login', function (req, res){ res.header("Access-Control-Allow-Origin", "*"); res.header('Access-Control-Allow-Methods', 'PUT, GET, POST, DELETE, OPTIONS'); res.header("Access-Control-Allow-Headers", "X-Requested-With"); res.header('Access-Control-Allow-Headers', 'Content-Type');
...