不使用反向代理解决跨域问题，含前后端代码及详细注解（axios+springboot）

yeshuboss

已于 2023-01-29 14:19:20 修改

阅读量319

点赞数

分类专栏：前端技术文章标签： spring boot 前端 javascript

于 2023-01-29 13:41:02 首次发布

本文链接：https://blog.csdn.net/yeshuboss/article/details/128787591

版权

一. 前端请求代码

import axios from "axios";

const method = 'post';

axios.request({
    headers:{
        /**
		 * 支持 text/plain、multipart/form-data、application/x-www-form-urlencoded
         * 根据不同场景使用，非文件流使用text/plain，文件流使用multipart/form-data
		 */
        "Content-Type": "text/plain;charset=UTF-8",
        /**
         * 传输cookie时设置为true，否则设置为false
         * 令牌等数据建议使用cookie传输
         */
        "withCredentials": true
    },
    /**
     * 支持 get、post、head
     * get请求参数放在params，post请求参数放在data
     */
    method,
    params: method != 'post' ? { a: 1 } : null,
    data: method == 'post' ? JSON.stringify({ a: 1 }) : null,
    //适用json传输数据
    responseType: 'json'
}).then(res => {
    if(res.status == 200) {
        console.log('success', res);
    } else {
        console.log('error', res);
    }
}).catch(err => {
    console.log('fail', err);
})

二. 前端令牌处理

import Cookies from 'js-cookie'

const tokenValue = ''; //使用你的代码获取令牌

Cookies.set('Authorization', tokenValue, { 
    // cookie 全局访问
    path: '/' 
})