vue+axios中使用raw+json请求失败的解决办法,application/json请求跨域问题

后端需要开启Content-Type的权限,平时不知道没开启权限,到自己遇到找了好久才知道是这个搞得鬼。o(╥﹏╥)o

 //Filter过滤器跨域处理
        String origin = request.getHeader("Origin");
        response.setHeader("Access-Control-Allow-Origin", origin);
        response.setHeader("Access-Control-Allow-Methods", "POST, GET, OPTIONS, DELETE");
        response.setHeader("Access-Control-Max-Age", "3600");
        response.setHeader("Access-Control-Allow-Headers", "x-requested-with,Authorization,token,**Content-Type**");
        response.setHeader("Access-Control-Allow-Credentials", "true");

附上过滤器的代码。

@WebFilter(urlPatterns = {"/*"})//过滤所有URL
public class LoginFilter implements Filter {

    //ALLOWED_PATHS 存放不需要过滤的url
    private static final Set<String> ALLOWED_PATHS = Collections.unmodifiableSet(new HashSet<>(
            Arrays.asList("/login", "/logout")));

    @Resource
    private RedisTemplate<String, Object> redisTemplate;

    @Override
    public void init(FilterConfig filterConfig) throws ServletException {
        System.out.println("----Filter过滤器初始化----");
    }

    @Override
    public void doFilter(ServletRequest servletRequest, ServletResponse servletResponse, FilterChain filterChain) throws IOException, ServletException {
        //校验用户登录状态
        HttpServletRequest request = (HttpServletRequest) servletRequest;
        HttpServletResponse response = (HttpServletResponse) servletResponse;

        String path = request.getRequestURI().substring(request.getContextPath().length()).replaceAll("[/]+$", "");
        boolean allowedPath = ALLOWED_PATHS.contains(path);

        //若该url不需要过滤
        if(allowedPath){
            //放行
            filterChain.doFilter(servletRequest,servletResponse);
        } else{

        //Filter过滤器跨域处理
        String origin = request.getHeader("Origin");
        response.setHeader("Access-Control-Allow-Origin", origin);
        response.setHeader("Access-Control-Allow-Methods", "POST, GET, OPTIONS, DELETE");
        response.setHeader("Access-Control-Max-Age", "3600");
        response.setHeader("Access-Control-Allow-Headers", "x-requested-with,Authorization,token,Content-Type");
        response.setHeader("Access-Control-Allow-Credentials", "true");

        //获取Headers中的参数
        String token = request.getHeader("token");
        token = token == null ? "" : token;

        //查询token在Redis中的剩余时间
        Long expire = redisTemplate.getExpire(token);
        if(expire > 0){ //是登录状态
            //重置token的时间
            redisTemplate.expire(token,30L, TimeUnit.MINUTES);

            //放行
            filterChain.doFilter(servletRequest,servletResponse);
        }else{
            //未登录,响应数据
            JSONObject jsonObject = new JSONObject();
            //jsonObject.put("user","null");
            jsonObject.put("msg","未登录");
            String string = JSONObject.toJSONString(jsonObject);
            response.setContentType("json/text;charset=utf-8");
            PrintWriter out = response.getWriter();

            out.write(string);
        }
        }
    }

    @Override
    public void destroy() {
        System.out.println("----过滤器销毁----");
    }
}

好的,这是一个比较复杂的问题,我将尽可能详细地回答你。 首先,你需要在 Vue 项目安装 Vuex、Vue Router、Element UI 和 Axios 这些库。可以通过以下命令来安装它们: ``` npm install vuex vue-router element-ui axios --save ``` 接下来,你需要创建一个 Vuex 的 store 来存储应用程序的状态。在 store ,你可以定义一些 mutation、action 和 getter 来改变状态。 在这个示例,我们需要定义一个 state 来存储我们的数据,例如: ```javascript const state = { items: [], currentItem: {} } ``` 然后,我们需要定义一些 mutation 来改变 state 的数据。例如: ```javascript const mutations = { setItems(state, items) { state.items = items }, setCurrentItem(state, item) { state.currentItem = item } } ``` 接下来,我们需要定义一些 action 来处理异步请求。例如: ```javascript const actions = { fetchItems({ commit }) { axios.get('/api/items.json').then(response => { commit('setItems', response.data) }) }, addItem({ commit, state }, item) { axios.post('/api/items.json', item).then(response => { commit('setItems', [...state.items, response.data]) }) }, updateItem({ commit, state }, item) { axios.put('/api/items/' + item.id + '.json', item).then(response => { const index = state.items.findIndex(i => i.id === response.data.id) const items = [...state.items] items[index] = response.data commit('setItems', items) commit('setCurrentItem', {}) }) }, deleteItem({ commit, state }, id) { axios.delete('/api/items/' + id + '.json').then(response => { const items = state.items.filter(i => i.id !== id) commit('setItems', items) }) } } ``` 这些 action 将发送请求到我们的 API 并更新 store 的数据。例如: - `fetchItems` 将获取所有数据并将其设置到 `items` 。 - `addItem` 将添加一个新的数据项并将其添加到 `items` 。 - `updateItem` 将更新一个数据项并将其更新到 `items` 。 - `deleteItem` 将删除一个数据项并将其从 `items` 删除。 最后,我们需要定义一些 getter 来获取我们的数据。例如: ```javascript const getters = { allItems: state => state.items, currentItem: state => state.currentItem } ``` 现在,我们已经完成了 store 的设置。接下来,我们需要创建一个 Vue 组件来渲染我们的数据,例如: ```html <template> <div> <el-table :data="items" style="width: 100%"> <el-table-column prop="name" label="Name"></el-table-column> <el-table-column prop="age" label="Age"></el-table-column> <el-table-column prop="address" label="Address"></el-table-column> <el-table-column> <template slot-scope="{ row }"> <el-button @click="editItem(row)">Edit</el-button> <el-button @click="deleteItem(row.id)">Delete</el-button> </template> </el-table-column> </el-table> <el-dialog :visible.sync="dialogVisible"> <el-form :model="currentItem" label-position="left" ref="form"> <el-form-item label="Name"> <el-input v-model="currentItem.name"></el-input> </el-form-item> <el-form-item label="Age"> <el-input-number v-model="currentItem.age"></el-input-number> </el-form-item> <el-form-item label="Address"> <el-input v-model="currentItem.address"></el-input> </el-form-item> </el-form> <div slot="footer" class="dialog-footer"> <el-button @click="dialogVisible = false">Cancel</el-button> <el-button type="primary" @click="submitForm">Save</el-button> </div> </el-dialog> <el-button @click="addItem()">Add Item</el-button> </div> </template> <script> import { mapState, mapActions } from 'vuex' export default { computed: { ...mapState(['items', 'currentItem']) }, methods: { ...mapActions(['fetchItems', 'addItem', 'updateItem', 'deleteItem']), editItem(item) { this.$store.commit('setCurrentItem', item) this.dialogVisible = true }, deleteItem(id) { this.deleteItem(id) }, submitForm() { const form = this.$refs.form form.validate(valid => { if (valid) { if (this.currentItem.id) { this.updateItem(this.currentItem) } else { this.addItem(this.currentItem) } this.dialogVisible = false } }) } } } </script> ``` 在这个组件,我们使用 Element UI 的表格和表单来渲染我们的数据。我们还使用Vuex 的 mapState、mapActions 来将 store 的状态和操作映射到组件的计算属性和方法。 现在,我们已经完成了一个基于 VueVuex、Vue Router、Element UI 和 Axios 的增删改查应用程序。当然,这个示例并不是完美的,你可能需要根据你的具体需求做一些适当的调整。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值