跨域时proxyTable不起作用？

Question

跨域时proxyTable不起作用？

Ginfai

21617

发布于
2023-04-13 江西

更新于
2023-04-14

问题描述

跨域时pathRewrite应该将url中的'api'给去掉，可是打开控制台发现还存在。导致无法访问，报错404

问题出现的环境背景及自己尝试过哪些方法

1.代理配置查看了，确定格式没有问题
2.后端接口路径没有问题(user/getImage)
3.main.js设置了反向代理，前端请求默认发送到 http://localhost:8088/api
猜测可能是其他配置导致的

相关代码

config/index.js

'use strict'
// Template version: 1.3.1
// see http://vuejs-templates.github.io/webpack for documentation.

const path = require('path')

module.exports = {
  devServer: {
    // Paths
    assetsSubDirectory: 'static',
    assetsPublicPath: '/',    
    proxy: {
      '/api': {
        target: 'http://localhost:8088',
        changeOrigin: true,
        pathRewrite: {
          '^/api': ''
        }
      }
    },

    // Various Dev Server settings
    host: 'localhost', // can be overwritten by process.env.HOST
    port: 8080, // can be overwritten by process.env.PORT, if port is in use, a free one will be determined
    autoOpenBrowser: false,
    errorOverlay: true,
    notifyOnErrors: true,
    poll: false, // https://webpack.js.org/configuration/dev-server/#devserver-watchoptions-

    
    /**
     * Source Maps
     */

    // https://webpack.js.org/configuration/devtool/#development
    devtool: 'cheap-module-eval-source-map',

    // If you have problems debugging vue-files in devtools,
    // set this to false - it *may* help
    // https://vue-loader.vuejs.org/en/options.html#cachebusting
    cacheBusting: true,

    cssSourceMap: true
  },

  build: {
    // Template for index.html
    index: path.resolve(__dirname, '../dist/index.html'),

    // Paths
    assetsRoot: path.resolve(__dirname, '../dist'),
    assetsSubDirectory: 'static',
    assetsPublicPath: '/',

    /**
     * Source Maps
     */

    productionSourceMap: true,
    // https://webpack.js.org/configuration/devtool/#production
    devtool: '#source-map',

    // Gzip off by default as many popular static hosts such as
    // Surge or Netlify already gzip all static assets for you.
    // Before setting to `true`, make sure to:
    // npm install --save-dev compression-webpack-plugin
    productionGzip: false,
    productionGzipExtensions: ['js', 'css'],

    // Run the build command with an extra argument to
    // View the bundle analyzer report after build finishes:
    // `npm run build --report`
    // Set to `true` or `false` to always turn it on or off
    bundleAnalyzerReport: process.env.npm_config_report
  }
}

config/dev.env.js

'use strict'
const merge = require('webpack-merge')
const prodEnv = require('./prod.env')

module.exports = merge(prodEnv, {
  NODE_ENV: '"development"',
  BASE_API: '"http://localhost:8088/api"',
})

api/user.js

import request from '@/utils/request'
//获取验证码
export async function codeImage(data){
    const res = await request({
        url:'/user/getImage',
        method:'get',
        data
    });
    // res是后端服务器返回的Map对象，包含key和image
    console.log(res); // 打印出来看看
    // 用res做一些操作，比如显示验证码图片
}

store/index.js

//记录用户的登录信息（状态、token），方便全局使用
import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

export default new Vuex.Store({
    state: {
        token: sessionStorage.getItem("token"),
        user: JSON.parse(sessionStorage.getItem("user"))//使用sessionStorage ，关掉浏览器的时候会被清除掉，和 localStorage 相比，比较利于保证实时性。
    },
    mutations: {
        // set
        SET_TOKENN: (state, token) => {
            state.token = token
            sessionStorage.setItem("token", token)
        },
        SET_USER: (state, user) => {
            state.user = user
            sessionStorage.setItem("user", JSON.stringify(user))
        },
        REMOVE_INFO : (state) => {
            state.token = ''
            state.user = {}
            sessionStorage.setItem("token", '')
            sessionStorage.setItem("user", JSON.stringify(''))
        }
    },
    getters: {

    },
    actions: {
    },
    modules: {
    }
})

util/request.js

//让请求头携带token
import axios from "axios"
import store from "@/store"

const service = axios.create({
    baseURL:process.env.BASE_API,//api的base_url
})

//request 请求拦截
service.interceptors.request.use(
    config=>{
        if (store.state.token) {
            //axios.get(url, {headers: {'token': store.state.token}})
            //config.headers['token']=window.sessionStorage.getItem("token")
        }
        return config
    },
    error=>{
        console.log(error)
        return Promise.reject(error)
    }
)

//reponse响应拦截
axios.interceptors.response.use(response => {
// Do something before response is sent
let res=response.data;
console.log(res)

if(res.code===200){
    return response
}else{
    return Promise.reject(response.data.msg)
}
},
// Do something with response error
error=>{
    console.log(error)
    if (error.response.data) {
        error.message=error.response.data.msg
    }
    if (error.response.status==401) {
        router.push("/login")
    }
    return Promise.reject(error)
}
);

export default service

view/reg.js

<template>
    <div>
        <div id="wrap">
            <div id="header">
                <div style="float: right;padding-top: 24px"><span v-text="time"/> &emsp; </div>
                <h1>旅游信息管理系统</h1>
            </div>
            <div id="header-bar"></div>
            <div id="content" style="height: 360px">
                <img style="float: right;height: 320px">
                <h2>注册</h2>
                <form>
                    <label>
                        <div class="label-text">账&emsp;号：</div>
                        <input type="text" v-model="user.username" name="username">
                    </label>
                    <label>
                        <div class="label-text">密&emsp;码：</div>
                        <input type="password" v-model="user.password" name="password">
                    </label>
                    <label>
                        <div class="label-text">邮&emsp;箱：</div>
                        <input type="text" v-model="user.email" name="email">
                    </label>

                    <!--前后端分离的架构, 动态访问验证码-->
                    <img :src="src" id="img-vcode" @click="getImage" :key="key">
                    <label>
                        <div class="label-text">验证码：</div>
                        <input type="text" v-model="code" name="vcode" style="width: 100px">
                    </label>

                    <button type="button" @click="saveUserInfo()">提 交</button>&emsp;
                    <!-- <a href="/login">去登录</a> -->
                    <button type="button" @click="tologin">返回登录</button>
                </form>
            </div>
            <div id="footer">
                yusael
            </div>
        </div>
    </div>
</template>

<script>
//import { codeImage } from '@/api/user';

    export default {
        name: "Reg",
        data() {
            return {
                user: {},
                code: "",
                src: "",
                key: "",
                time: "",
            }
        },
        methods: {
            saveUserInfo() {
                if (!this.user.username) {
                    alert('用户名不能为空！');
                    return;
                }
                if (!this.user.password) {
                    alert('密码不能为空！');
                    return;
                }
                if (!this.user.email) {
                    alert('邮箱不能为空！');
                    return;
                }
                // 发送axios
                const _this = this
                this.axios.post("/user/register?code=" + this.code + "&key=" + this.key, this.user).then((res) => {
                    console.log(res);
                    if (res.data.state) {
                        alert(res.data.msg + ",点击确定跳转到登录页面!!!");
                        _this.$router.push("/login")
                        
                    } else {
                        alert(res.data.msg);
                    }
                });
            },
            getImage() {
                const _this = this;
                this.$axios.get("/user/getImage").then((res) => {//codeImage(this.code)
                    console.log(res);
                    _this.src = "data:image/png;base64," + res.data.image;
                    _this.key = res.data.key;
                 }).catch((error) => {
                 console.log(error);
                   });
            },
            tologin(){
                this.$router.push('/login')
            }
        },
        created() {
            this.getImage(); // 获取验证码
            let now = new Date();
            this.time = `${now.getFullYear()}-${now.getMonth() + 1}-${now.getDate()}`;
        }
    }
</script>

<style scoped>
 form {
            width: 270px;
        }

        input {
            width: 70%;
            background: #eee;
        }

        input:focus {
            background: #fff;
        }

        form {
            padding: 0 12px 12px;
        }

        label {
            display: block;
            padding-bottom: 12px;
        }

        #img-vcode {
            width: 56px;
            height: 21px;
            float: right;
            position: relative;
            top: 2px;
            left: -6px
        }

        .label-text {
            width: 30%;
            float: left;
        }
</style>

main.js

// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
import App from './App'
import router from './router'

//引入elementUI
import './css/style.css'
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
//import store from './store'
var axios=require('axios')
Vue.prototype.$axios=axios;
// 设置反向代理，前端请求默认发送到 http://localhost:8088/api
axios.defaults.baseURL = '/api'
Vue.config.productionTip = false
Vue.config.devtools = true
Vue.use(ElementUI)
axios.defaults.withCredentials = false;
/* eslint-disable no-new */

//钩子函数，访问路由前调用
// router.beforeEach((to,from,next)=>{
// //路由需要认证
//   if (to.meta.requireAuth) {
//     //获取并判断store里是否有token
//     if (store.state.token) {
//       next()
//     }else{
//       next({
//         path:'login',
//         query:{redirect: to.fullPath}
//       })
//     }  
//   }else{
//     next()
//   }
// })

new Vue({
  el: '#app',
  router,
  axios,
  store,
  components: { App },
  template: '<App/>'
})

views/reg.vue

<template>
    <div>
        <div id="wrap">
            <div id="header">
                <div style="float: right;padding-top: 24px"><span v-text="time"/> &emsp; </div>
                <h1>旅游信息管理系统</h1>
            </div>
            <div id="header-bar"></div>
            <div id="content" style="height: 360px">
                <img style="float: right;height: 320px">
                <h2>注册</h2>
                <form>
                    <label>
                        <div class="label-text">账&emsp;号：</div>
                        <input type="text" v-model="user.username" name="username">
                    </label>
                    <label>
                        <div class="label-text">密&emsp;码：</div>
                        <input type="password" v-model="user.password" name="password">
                    </label>
                    <label>
                        <div class="label-text">邮&emsp;箱：</div>
                        <input type="text" v-model="user.email" name="email">
                    </label>

                    <!--前后端分离的架构, 动态访问验证码-->
                    <img :src="src" id="img-vcode" @click="getImage" :key="key">
                    <label>
                        <div class="label-text">验证码：</div>
                        <input type="text" v-model="code" name="vcode" style="width: 100px">
                    </label>

                    <button type="button" @click="saveUserInfo()">提 交</button>&emsp;
                    <!-- <a href="/login">去登录</a> -->
                    <button type="button" @click="tologin">返回登录</button>
                </form>
            </div>
            <div id="footer">
                yusael
            </div>
        </div>
    </div>
</template>

<script>
//import { codeImage } from '@/api/user';

    export default {
        name: "Reg",
        data() {
            return {
                user: {},
                code: "",
                src: "",
                key: "",
                time: "",
            }
        },
        methods: {
            saveUserInfo() {
                if (!this.user.username) {
                    alert('用户名不能为空！');
                    return;
                }
                if (!this.user.password) {
                    alert('密码不能为空！');
                    return;
                }
                if (!this.user.email) {
                    alert('邮箱不能为空！');
                    return;
                }
                // 发送axios
                const _this = this
                this.axios.post("/user/register?code=" + this.code + "&key=" + this.key, this.user).then((res) => {
                    console.log(res);
                    if (res.data.state) {
                        alert(res.data.msg + ",点击确定跳转到登录页面!!!");
                        _this.$router.push("/login")
                        
                    } else {
                        alert(res.data.msg);
                    }
                });
            },
            getImage() {
                const _this = this;
                this.$axios.get("/user/getImage").then((res) => {//codeImage(this.code)
                    console.log(res);
                    _this.src = "data:image/png;base64," + res.data.image;
                    _this.key = res.data.key;
                 }).catch((error) => {
                 console.log(error);
                   });
            },
            tologin(){
                this.$router.push('/login')
            }
        },
        created() {
            this.getImage(); // 获取验证码
            let now = new Date();
            this.time = `${now.getFullYear()}-${now.getMonth() + 1}-${now.getDate()}`;
        }
    }
</script>

<style scoped>
 form {
            width: 270px;
        }

        input {
            width: 70%;
            background: #eee;
        }

        input:focus {
            background: #fff;
        }

        form {
            padding: 0 12px 12px;
        }

        label {
            display: block;
            padding-bottom: 12px;
        }

        #img-vcode {
            width: 56px;
            height: 21px;
            float: right;
            position: relative;
            top: 2px;
            left: -6px
        }

        .label-text {
            width: 30%;
            float: left;
        }
</style>

后端
util/CreateImageCode

package com.example.springbootweb3mybatis.util;

import javax.imageio.ImageIO;
import java.awt.*;
import java.awt.image.BufferedImage;
import java.io.IOException;
import java.io.OutputStream;
import java.util.Random;

public class CreateImageCode {
    // 图片的宽度。
    private int width = 160;
    // 图片的高度。
    private int height = 40;
    // 验证码字符个数
    private int codeCount = 4;
    // 验证码干扰线数
    private int lineCount = 20;
    // 验证码
    private String code = null;
    // 验证码图片Buffer
    private BufferedImage buffImg = null;
    Random random = new Random();

    public CreateImageCode() {
        creatImage();
    }

    public CreateImageCode(int width, int height) {
        this.width = width;
        this.height = height;
        creatImage();
    }

    public CreateImageCode(int width, int height, int codeCount) {
        this.width = width;
        this.height = height;
        this.codeCount = codeCount;
        creatImage();
    }

    public CreateImageCode(int width, int height, int codeCount, int lineCount) {
        this.width = width;
        this.height = height;
        this.codeCount = codeCount;
        this.lineCount = lineCount;
        creatImage();
    }

    // 生成图片
    private void creatImage() {
        int fontWidth = width / codeCount;// 字体的宽度
        int fontHeight = height - 5;// 字体的高度
        int codeY = height - 8;

        // 图像buffer
        buffImg = new BufferedImage(width, height, BufferedImage.TYPE_INT_RGB);
        Graphics g = buffImg.getGraphics();
        //Graphics2D g = buffImg.createGraphics();
        // 设置背景色
        g.setColor(getRandColor(200, 250));
        g.fillRect(0, 0, width, height);



        // 设置字体
        //Font font1 = getFont(fontHeight);
        Font font = new Font("Fixedsys", Font.BOLD, fontHeight);
        g.setFont(font);

        // 设置干扰线
        for (int i = 0; i < lineCount; i++) {
            int xs = random.nextInt(width);
            int ys = random.nextInt(height);
            int xe = xs + random.nextInt(width);
            int ye = ys + random.nextInt(height);
            g.setColor(getRandColor(1, 255));
            g.drawLine(xs, ys, xe, ye);
        }

        // 添加噪点
        float yawpRate = 0.01f;// 噪声率
        int area = (int) (yawpRate * width * height);
        for (int i = 0; i < area; i++) {
            int x = random.nextInt(width);
            int y = random.nextInt(height);

            buffImg.setRGB(x, y, random.nextInt(255));
        }


        String str1 = randomStr(codeCount);// 得到随机字符
        this.code = str1;
        for (int i = 0; i < codeCount; i++) {
            String strRand = str1.substring(i, i + 1);
            g.setColor(getRandColor(1, 255));
            // g.drawString(a,x,y);
            // a为要画出来的东西，x和y表示要画的东西最左侧字符的基线位于此图形上下文坐标系的 (x, y) 位置处

            g.drawString(strRand, i*fontWidth+3, codeY);
        }


    }

    // 得到随机字符
    private String randomStr(int n) {
        String str1 = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz1234567890";
        String str2 = "";
        int len = str1.length() - 1;
        double r;
        for (int i = 0; i < n; i++) {
            r = (Math.random()) * len;
            str2 = str2 + str1.charAt((int) r);
        }
        return str2;
    }

    // 得到随机颜色
    private Color getRandColor(int fc, int bc) {// 给定范围获得随机颜色
        if (fc > 255)
            fc = 255;
        if (bc > 255)
            bc = 255;
        int r = fc + random.nextInt(bc - fc);
        int g = fc + random.nextInt(bc - fc);
        int b = fc + random.nextInt(bc - fc);
        return new Color(r, g, b);
    }

    /**
     * 产生随机字体
     */
    private Font getFont(int size) {
        Random random = new Random();
        Font font[] = new Font[5];
        font[0] = new Font("Ravie", Font.PLAIN, size);
        font[1] = new Font("Antique Olive Compact", Font.PLAIN, size);
        font[2] = new Font("Fixedsys", Font.PLAIN, size);
        font[3] = new Font("Wide Latin", Font.PLAIN, size);
        font[4] = new Font("Gill Sans Ultra Bold", Font.PLAIN, size);
        return font[random.nextInt(5)];
    }

    // 扭曲方法
    private void shear(Graphics g, int w1, int h1, Color color) {
        shearX(g, w1, h1, color);
        shearY(g, w1, h1, color);
    }

    private void shearX(Graphics g, int w1, int h1, Color color) {

        int period = random.nextInt(2);

        boolean borderGap = true;
        int frames = 1;
        int phase = random.nextInt(2);

        for (int i = 0; i < h1; i++) {
            double d = (double) (period >> 1)
                    * Math.sin((double) i / (double) period
                    + (6.2831853071795862D * (double) phase)
                    / (double) frames);
            g.copyArea(0, i, w1, 1, (int) d, 0);
            if (borderGap) {
                g.setColor(color);
                g.drawLine((int) d, i, 0, i);
                g.drawLine((int) d + w1, i, w1, i);
            }
        }

    }

    private void shearY(Graphics g, int w1, int h1, Color color) {

        int period = random.nextInt(40) + 10; // 50;

        boolean borderGap = true;
        int frames = 20;
        int phase = 7;
        for (int i = 0; i < w1; i++) {
            double d = (double) (period >> 1)
                    * Math.sin((double) i / (double) period
                    + (6.2831853071795862D * (double) phase)
                    / (double) frames);
            g.copyArea(i, 0, 1, h1, 0, (int) d);
            if (borderGap) {
                g.setColor(color);
                g.drawLine(i, (int) d, i, 0);
                g.drawLine(i, (int) d + h1, i, h1);
            }

        }

    }

    public void write(OutputStream sos) throws IOException {
        ImageIO.write(buffImg, "png", sos);
        sos.close();
    }

    public BufferedImage getBuffImg() {
        return buffImg;
    }

    public String getCode() {
        return code.toLowerCase();
    }
}

controller/UserController.java

//生成验证码
    @GetMapping("/getImage")
    public Map<String, String> getImage(HttpServletRequest request) throws IOException {
        Map<String, String> result = new HashMap<>();
        CreateImageCode createImageCode = new CreateImageCode();
        // 获取验证码
        String securityCode = createImageCode.getCode();
        // 验证码存入session
        String key = new SimpleDateFormat("yyyyMMddHHmmss").format(new Date());
        request.getServletContext().setAttribute(key, securityCode);
        // 生成图片
        BufferedImage image = createImageCode.getBuffImg();
        //进行base64编码
        ByteArrayOutputStream bos = new ByteArrayOutputStream();
        ImageIO.write(image, "png", bos);
        String string = Base64Utils.encodeToString(bos.toByteArray());
        result.put("key", key);
        result.put("image", string);
        return result;
    }

你期待的结果是什么？实际看到的错误信息又是什么？

新的结果：

后端已经返回结果，为什么验证码无法显示

vue2 vue-cli springboot javascript npm

阅读 2k

1 个回答

得票最新

陟上晴明

21.5k145091

发布于
2023-04-14 浙江

更新于
2023-04-14

虽然但是，你已经在 dev.env.js 里面配置了 BASE_API: '"http://localhost:8088/api"' 了，也在 util/request.js 里面使用了 baseURL:process.env.BASE_API 为什么在 main.js 中还要通过 axios.defaults.baseURL = '/api' 去修改 baseURL ?
main.js中就不需要去操作 axios.defaults 的吖。

然后就是即使我和你一样是又在项目内重置了 axios.defaults.baseURL ，我依旧是可以正常重写路径的，所以不清楚你是怎么启动的项目，你的请求路径上面的 IP:Port 一定要和 devServer 启动的 IP:Port 一致，因为你的 devServer 并没有配置 host 和 port 属性，不然你发起的请求不会通过 devServer 的，也就不会进入 proxy 功能。
如果你不想要这样，想要所有的请求都通过 devServer 的代理，那么可以将 devServer 的 host 属性设置为 0.0.0.0 来实现。

所以最好提供一个完整的请求截图，比如说以下这样：

然后最后一个就是控制台上面的请求URL是不会重写的，还是你原来有 /api 的这个链接，只不过在请求到你本地 devServer 的时候，通过 devServer 启动的 HTTP 服务重写了请求路径和地址，就类似在本地启动了一个 NG 的反代。

最后的最后，我认为你的 config/index.js 的配置是有问题的，因为 assetsPublicPath 这些属性并不应该和 proxy 同级。所以你得贴上你完整的 config/index.js 文件并且请认真阅读 CLI 的文档配置参考 | Vue CLI

另外，我记得你之前的问题不是说你的CLI是5x吗，为啥配置方式还是2x以前的那种？直接配置在项目根目录下的 vue.config.js 中就可以了。

撰写回答

你尚未登录，登录后可以

和开发者交流问题的细节
关注并接收问题和回答的更新提醒
参与内容的编辑和改进，让解决方法与时俱进

推荐问题

相似问题

找不到问题？创建新问题

跨域时proxyTable不起作用？

问题描述

问题出现的环境背景及自己尝试过哪些方法

相关代码

你期待的结果是什么？实际看到的错误信息又是什么？

你尚未登录，登录后可以

js 如何将Key属性相同的放在同一个数组？

vue项目如何在初始化之前跳转外部页面？

js如何控制移动端overflow:scroll容器滑动的最大速度？

前端代码更新如何通知用户刷新页面？

vue2.6，打包后app.js，8M,chunk.js，6M，加载打开页面很慢，有什么办法减少，打开页面快一些？

为什么会出现CORS error？

如何在SpringBoot/MySQL事务中并行执行多条SQL？