问题说明
同源策略是一个重要的安全策略，它用于限制一个origin的文档或者它加载的脚本如何能与另一个源的资源进行交互。它能帮助阻隔恶意文档，减少可能被攻击的媒介。但是有时我们想访问时就会遇到跨域请求的限制，在这里说一下解决方案。
需要访问后端数据的前端表格代码：
<template> <div> <el-table :data="tableData" style="width: 100%" size="mini"> <el-table-column prop="name" label="直接显示名字" width="180"> </el-table-column> <el-table-column label="日期" width="180"> <template slot-scope="scope"> <i class="el-icon-time"></i> <span style="margin-left: 10px">{{ scope.row.date }}</span> </template> </el-table-column> <el-table-column label="姓名" width="180"> <template slot-scope="scope"> <el-popover trigger="hover" placement="top"> <p>姓名: {{ scope.row.name }}</p> <p>住址: {{ scope.row.address }}</p> <div slot="reference" class="name-wrapper"> <el-tag size="medium">{{ scope.row.name }}</el-tag> </div> </el-popover> </template> </el-table-column> <el-table-column label="操作"> <template slot-scope="scope"> <el-button size="mini" @click="handleEdit(scope.$index, scope.row)">编辑</el-button> <el-button size="mini" type="danger" @click="handleDelete(scope.$index, scope.row)">删除</el-button> </template> </el-table-column> </el-table> </div> </template> <script> import axios from 'axios' export default { name: 'Table', components: { }, data() { return { tableData: [] } }, methods: { }, created() { // 看这里,看这里,看这里！！！！！ //请求后端的数据,后端不进行处理时,这样是访问不到数据，会遇到跨域请求的问题 axios.get('http://127.0.0.1:8080/web/user') //在前端写死的json数据，用来测试访问的 // axios.get('stu.json') .then((res)=>{ this.tableData = res.data }) .catch(function (error) { console.log(error); }); } } </script> <style> </style>
前端表格中的created()的代码：
created() { //请求后端的数据,后端不进行处理时,这样是访问不到数据，会遇到跨域请求的问题 axios.get('http://127.0.0.1:8080/web/user') //在前端写死的json数据，用来测试访问的 // axios.get('stu.json') .then((res)=>{ this.tableData = res.data }) .catch(function (error) { console.log(error); }); }
后端的UserController代码：
package com.neuedu.controller; import com.alibaba.fastjson.JSON; import com.alibaba.fastjson.serializer.SerializerFeature; import com.neuedu.entity.User; import javax.servlet.ServletException; import javax.servlet.annotation.WebServlet; import javax.servlet.http.HttpServlet; import javax.servlet.http.HttpServletRequest; import javax.servlet.http.HttpServletResponse; import java.io.IOException; import java.io.PrintWriter; import java.util.ArrayList; import java.util.Date; import java.util.List; /** * Keafmd * * @ClassName: UserController * @Description: UserController * @author: 牛哄哄的柯南 * @date: 2020-12-17 14:20 * * * http://127.0.0.1:8080/web/user */ @WebServlet(name="UserController" ,urlPatterns = "/user") public class UserController extends HttpServlet { @Override protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException { //可以从数据库获取，我们后端这里暂时这样写。 List userList = new ArrayList(); userList.add(new User(1,"牛哄哄的柯南1","某某省某某市1",new Date())); userList.add(new User(2,"牛哄哄的柯南2","某某省某某市2",new Date())); userList.add(new User(3,"牛哄哄的柯南3","某某省某某市3",new Date())); userList.add(new User(4,"牛哄哄的柯南4","某某省某某市4",new Date())); userList.add(new User(5,"牛哄哄的柯南5","某某省某某市5",new Date())); userList.add(new User(6,"牛哄哄的柯南6","某某省某某市6",new Date())); String json = JSON.toJSONString(userList, SerializerFeature.WriteDateUseDateFormat ); //转换格式，让前端接收 resp.setContentType("application/json"); resp.setCharacterEncoding("utf-8"); PrintWriter out = resp.getWriter(); out.write(json); out.flush(); out.close(); } @Override protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException { this.doGet(req, resp); } }
直接访问http://127.0.0.1:8080/web/user时显示的是一个json对象，当我们使用80端口访问前端代码时，因为前端会通过8080端口请求后端的json对象，这时需要同时访问后端的8080的端口和前端的80端口，这种情况浏览器默认是不允许的，这时就会出现跨域请求的问题。
解决办法
解决办法就是我们在后端设置resp.addHeader("Access-Control-Allow-Origin","*");允许同时访问，最好是写个过滤器。
在后端写个CrossFilter过滤器。
CrossFilter代码：
package com.neuedu.filter; import javax.servlet.*; import javax.servlet.annotation.WebFilter; import javax.servlet.http.HttpServletResponse; import java.io.IOException; /** * Keafmd * * @ClassName: CrossFilter * @Description: * @author: 牛哄哄的柯南 * @date: 2020-12-17 14:47 */ //过滤所有的 @WebFilter(urlPatterns = "/*") public class CrossFilter implements Filter { @Override public void init(FilterConfig filterConfig) throws ServletException { } @Override public void doFilter(ServletRequest request, ServletResponse response, FilterChain chain) throws IOException, ServletException { HttpServletResponse resp = (HttpServletResponse) response; resp.addHeader("Access-Control-Allow-Origin","*"); chain.doFilter(request, response); } @Override public void destroy() { } }
