在vue项目中使用axios代理发送请求

最新推荐文章于 2024-08-05 14:25:36 发布

鹿鹿想学编程

最新推荐文章于 2024-08-05 14:25:36 发布

阅读量991

点赞数 1

分类专栏： vue 文章标签： proxy jsonp vue

本文链接：https://blog.csdn.net/eeeze/article/details/119026940

版权

本文介绍了在Vue项目中如何使用axios代理来解决跨域问题，包括CORS、JSONP和代理跨域的比较。重点讲述了通过创建vue.config.js配置代理，修改baseURL，以及axios发送请求的参数设置，实现接口代理的安全和便捷。

摘要由CSDN通过智能技术生成

我们知道跨域是浏览器为了安全而做出的限制策略
浏览器请求必须遵循同源策略：同域名，同端口，同协议

那么我们会经常用到的解决跨域的方法有这几种：
CORS跨域、jsonp跨域和代理跨域

CORS跨域 - 服务端设置，前端直接调用
说明：后台允许前端某个站点进行访问

JSONP跨域前端适配后台配合
说明：前后台同时改造，
要注意的–他不是真正的请求，他是一段js脚本

接下来就是接口代理，其实就是通过修改nginx服务器配置来实现—目前用的比较多（前端修改，后台不动）是最安全也是最省事的

接下来——上代码！
首先给大家看一下我的项目架构
在这里插入图片描述
首先需要在目录下建立一个vue.config.js（注意这里是根目录不是src）
内容：

module.exports = {
   
    devServer: {
   
        host: 'localhost',
        port: 8080,
        proxy: {
   
            // 接口代理
            '/api': {
   
                target: 'http://mall-pre.springboot.cn',
                changeOrigin:true,
                pathRewrite: {