localhost本地跨域问题?

问题背景

前端由vue实现,运行在http://localhost:8080/上,后端由springboot实现,运行在http://localhost:8081/上,程序通过在springboot的filter中添加响应头Access-Control-Allow-Origin以解决跨域问题
程序运行,通过点击vue页面的相应按钮进行访问

存在问题

当添加Access-Control-Allow-Origin*时可以解决跨域问题,但是当Access-Control-Allow-Origin的值为http://localhost:8080/时无法解决跨域问题

关键逻辑节选

vue:

<template>
  <div>
    <h1>查询数据库</h1>
    <button @click="action('http://localhost:8081/data?id=1')">点击查询id为1的数据(结果控制台输出)</button>
    <hr>
  </div>
</template>

<script>
import axios from 'axios'
export default {
  name: 'inquire',
  methods:{
    action(url){
      console.log(url)
      //注意代理服务的使用方式
      axios.get(url).then(
        response => {
          console.log("Succeed:" , response.data)
        },
        err => {
          console.log("Err:" , err)
        },
      )
    },
  }
}
</script>

springboot
filter

package SpringBoot.filter;

import SpringBoot.logger.MyLogger;
import org.springframework.context.annotation.Bean;
import org.springframework.context.annotation.ComponentScan;
import org.springframework.core.annotation.Order;

import javax.servlet.*;
import javax.servlet.annotation.WebFilter;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;

@WebFilter(filterName = "MyFilter", urlPatterns = { "/*" })
public class MyFilter implements Filter {
    @Override
    public void init(FilterConfig filterConfig) throws ServletException {
        MyLogger.myLoggerDebug("Filter start...");
    }

    @Override
    public void doFilter(ServletRequest servletRequest,
                         ServletResponse servletResponse,
                         FilterChain filterChain) throws IOException, ServletException {

        HttpServletResponse hsrp = (HttpServletResponse) servletResponse;
        hsrp.setHeader("Access-Control-Allow-Origin", "http://localhost:8080/");


        filterChain.doFilter(servletRequest, servletResponse);

    }

    @Override
    public void destroy() {
        MyLogger.myLoggerDebug("Filter end...");
    }
}

controller

package SpringBoot.controller;


import SpringBoot.bean.User;
import SpringBoot.filter.MyFilter;
import SpringBoot.logger.MyLogger;
import SpringBoot.service.MyService;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.web.bind.annotation.*;
import org.springframework.web.servlet.ModelAndView;
import org.springframework.web.servlet.resource.HttpResource;

import javax.servlet.FilterChain;
import javax.servlet.ServletException;
import javax.servlet.ServletRequest;
import javax.servlet.ServletResponse;
import javax.servlet.http.Cookie;
import javax.servlet.http.HttpServletResponse;
import javax.servlet.http.HttpServletResponseWrapper;
import java.io.IOException;
import java.net.*;

@RestController
public class MyController {
    @Autowired
    MyService myService;

    @RequestMapping("/data")
    public User selectUser(@RequestParam("id") int id, HttpServletResponse hsrp )
            throws InterruptedException, URISyntaxException {

            Cookie cookie = new Cookie("userName","测试参数");
            hsrp.addCookie(cookie);
        }
        return myService.selectUser(id);
    }
}

运行截图

后端数据库接口image.png

前端界面(运行前)image.png

前端界面(运行后)image.png

前端运行后的报错信息image.png

为便于排查错误,完整程序已传至云盘,可按需下载&查看:链接: https://caiyun.139.com/m/i?0d... 提取码:GO1S


补充:当响应头Access-Control-Allow-Origin设置成*时可以解决跨域问题
后端:image.png
前端(运行后):image.pngimage.png

阅读 5k
2 个回答

Access-Control-Allow-Origin的值应该为http://localhost:8080,不含最后那个斜杠/

再如:

Access-Control-Allow-Origin: https://developer.mozilla.org

参见
https://developer.mozilla.org...

因为多了个左斜线 /,将 MyFilter 类中的

hsrp.setHeader("Access-Control-Allow-Origin", "http://localhost:8080/");

改为

hsrp.setHeader("Access-Control-Allow-Origin", "http://localhost:8080");
撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题