vue中解决跨域问题

来源：互联网发布：客户还款提醒软件编辑：程序博客网时间：2024/06/10 20:12

将接口配置到本地代理的方法

一般来说，我们会在正式环境中讲接口配置到和项目路径是一个域名下的。因此，我们没必要在调用接口的时候使用绝对地址，使用相对地址即可。但是开发环境的话，我们本地跑的是localhost:8080地址，当然要使用包含域名的接口地址了。

正式环境

接口地址 /api/**
前端页面地址 /
开发环境
http://www.xxx.com/api/**
http://localhost:8080

如上，在请求上，我们的开发环境不仅仅面临要把接口的全路径写全的问题，还包括跨域问题等等。

所以，解决这个问题的方法就出来了，将接口地址通过代理的方式映射到本地，让我们的本地开发也可以使用相对根目录的方式请求接口。

webpack本身自带了代理功能，我们的vue-cil更是集成了进来，只要经过简单的配置即可。

我们打开下面路径的文件

config/index.js

在其中的dev对象里面找到：

proxyTable: {},

这里就是配置代理的地方，我们进行如下设置：

proxyTable: {  '/api/**': {    target: 'http://www.xxx.com', // 你接口的域名    secure: false,      // 如果是https接口，需要配置这个参数    changeOrigin: true,     // 如果接口跨域，需要进行这个参数配置  }},

webpack代理设置请参阅：https://webpack.js.org/configuration/dev-server/#devserver-proxy

将项目打包到子目录

默认配置下，我们的项目只能在根目录下运行，如果真这样的话，那还是非常麻烦的，可能我们需要在一个域名下面跑多个项目。

通过下面的简单设置，可以将我们打包的文件放在任意地方跑起来。

同样是config/index.js这个配置文件，我们找到build节点，找到下面的代码：

例如，你想放在/h5/下面，就应该这样填写assetsPublicPath: '/h5/',

阅读全文

0 0