目的: 接口的调用
跨域方式:
1,express 中间的使用
2,nginx 代理
3, 谷歌浏览器跨域设置
-------------------------------------------- 分割线 -----------------------------------------------
express 中间件 --- 不推荐
原理: 本地代码请求 ->express 中间件 (处理, 添加 headers 后转发)-> 服务器
express 中间件 medical
本地代码文件目录 pacs
######### 配置接口
在服务器中间件配置 medical/routes/home.js 没有需要新建 home.js // 哪个文件使用就可以名字命名 这里就是 home 页面的接口
- home.js
- var express = require('express');
- var router = express.Router();
- var http = require("ykt-http-client"); // 中间件的客户端 参数存放在 req.bdoy 里面
- /* GET users listing. */
- var comm = require('../public/js/constant'); // 这里面是定义服务器的地址
- var ip = comm.IP;
- const IP = comm.IP;
- router.get('/', function (req, res, next) {
- res.send('respond with a resource');
- });
- // 获取频道
- router.post('/aa', function (req, res) {
- http.post(ip + 'aaaa', req.body).then((data) => {
- //console.log(JSON.stringify(data))
- res.send(data);
- })
- });
- // 主页 这就是要用到的接口
- router.post('/main', function (req, res) {
- http.post(IP+'/xhhms/rest/interfacesLoginController/getMenu', req.body ,req.headers).then((data) => {
- console.log(IP+'/xhhms/rest/interfacesLoginController/getMenu');
- res.send(data);
- })
- });
上面的需要定义 constant.js 的 ip
类似这样定义即可.
######### 服务器中间的 app.js 里面引用
添加 var home = require('./routes/home');
然后使用 app.use('/home', home);
- ###### 这样就 ok 了, 就可以调用这个接口了
- createded() {
- this.getMune();
- },
- methods:{
- getMune () {
- var params=new Object();
- axios.post(this.ip + '/home/main', params, {
- headers: {
- 'X-AUTH-TOKEN': this.token // 这里用到了登录用的 token , 还需要在下面配置
- }
- }).then((res) => {
- var data = res.data;
- if (!!data) {
- console.log(data);
- localStorage.setItem('nume', JSON.stringify(data.data[0].children));
- } else {
- return false;
- }
- }, (err) => {
- console.log(err);
- })
- }
- }
- ##### 因为上面用到了 header 里面的 X-AUTH-TOKEN, 需要修改中间件的配置文件, 如果不用服务器中间件的调用的直接添加表头即可.
1, 当前项目的传递方式
本地代码 (pacs)-----------> 服务器中间件 (web)------------> 服务器
相当于多用了一层, 中间层主要用来解决跨域等其他问题(却显得累赘).
如上图, 传递的参数存放在 req.body 里面, 传递的 header 存放在 req.headers 里面, 我们请求接口后就把 req 传递到
ykt-http-client 里面, 目录是在 medical/node_modules/ykt-http-client/index.js 里面
如果只是传递参数的话就没有问题, 因为原来的脚本里面默认是吧 req.body 传递过去的, 但是却没有 req.headers 保存的参数, 所以需要修改下当前的 index.js 文件
这样的话, 如果请求里面发现了 headers 参数就会传递到服务器里面, 才能达到目的.
nginx 代理 --- 不推荐
原理和中间大同小异, 也是通过转发的方式.
谷歌浏览器跨域 --- 推荐
参考网址: https://www.cnblogs.com/laden666666/p/5544572.html 进行跨域后
直接通过 vue-resource 进行请求即可.
首先安装 vue-resource
cnpm install vue-resource --save
然后在 src/main.js 里面引入
- import VueResource from 'vue-resource';
- Vue.use(VueResource);
- Vue.http.interceptors.push((request, next) => {
- request.headers.set('X-AUTH-TOKEN', localStorage.getItem("token"))
- // request.headers.set('Access-Control-Allow-Origin', '*');
- // request.headers.set('Access-Control-Allow-Headers', 'Content-Type');
- // request.headers.set('Access-Control-Allow-Methods', 'PUT, POST, GET, DELETE, OPTIONS');
- request.headers.set('Content-Type', 'application/json')
- //console.log(request.headers)
- next(response => {
- // console.log(response)
- return response;
- })
- })
- ### 由于使用了浏览器跨域设置, 这里面不需要设置什么.
- ### 使用的话直接在各个位置使用即可
- var params=new Object(); // 定义的参数
- params.id = '1; // 设置 id=1
- this.$http.post(this.ip + '/xhhms/rest/interRemoteReportController/v1/getKnowledge', params, {
- headers: {
- 'X-AUTH-TOKEN': this.token // 定义的表头 根据需要自行添加
- }
- }).then((res) => {
- var data = JSON.parse(res.data);
- if (!!data&&data.status=="1") {
- // $.fn.zTree.init($("#shuyuSelect"), this.shuyusetting, data.data);
- } else {
- return false;
- }
- }, (err) => {
- console.log(err);
- });
---- 由于刚刚接触 vue, 使用过程中也是绕了很多圈子, 难受.
来源: https://www.cnblogs.com/shuangzikun/p/taotao_vue_post.html