前端主要的三种跨域解决方案
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,代码如下:
以该vue项目为例:
首先在根目录下创建 vue.config.js (不能是其他的名称),新建后一定要重启项目
文件代码如下图:


运行效果图如下:

如果有多个接口要代理proxy,代码如下:
- proxy:{
- '/api1':{
- target:'http://www.imooc.com',
- changeOrigin:true,
- pathRewrite:{
- '/api':''
- }
- },
- '/api2':{
- target:'http://www.baidu.com',
- },
- '/api3':{
- target:'http://www.taobao.com',
- }
- }