一个菜鸟的互联网技术分享博客
您的位置: 主页 > 使用vue全家桶高仿小米商城--前端主要的三种跨域解决方案
advertisement

使用vue全家桶高仿小米商城--前端主要的三种跨域解决方案

前端主要的三种跨域解决方案
1、CORS跨域(使用easy mock上面的接口模拟)
   1.1、前端不需要处理,服务端设置,前端直接调用
   1.2、后台允许前端某个站点进行访问
   代码及效果图如下:
  
   
2、JSONP跨域
   2.1、前端适配,后台配合
   2.2、前后台同时改造
   代码及效果图如下:
   
   
3、代理跨域(最适用,只需要运维人员修改下配置即可)
   3.1接口代理 - 通过修改nginx服务器配置来实现
   3.2、前端修改,后台不动
   以该vue项目为例:
   首先在根目录下创建 vue.config.js (不能是其他的名称),新建后一定要重启项目
   文件代码如下图:
   



运行效果图如下:

如果有多个接口要代理proxy,代码如下:


  1. proxy:{  
  2.   
  3.       '/api1':{  
  4.   
  5.         target:'http://www.imooc.com',  
  6.   
  7.         changeOrigin:true,  
  8.   
  9.         pathRewrite:{  
  10.   
  11.           '/api':''  
  12.   
  13.         }  
  14.   
  15.       },  
  16.   
  17.      '/api2':{  
  18.   
  19.          target:'http://www.baidu.com',  
  20.   
  21.     },  
  22.   
  23.     '/api3':{  
  24.   
  25.          target:'http://www.taobao.com',  
  26.   
  27.     }  
  28.   
  29. }  

zhangren.online
上一篇:Vue项目运行时候出现:Mixed spaces and tabs...
下一篇:使用vue全家桶高仿小米商城--安装依赖

您可能喜欢

​vue中非父子组件传值

​vue中非父子组件传值

​vue中ref的使用

​vue中ref的使用

回到顶部