问题说明

同源策略是一个重要的安全策略，它用于限制一个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() {

    }
}

看完如果对你有帮助，感谢点赞支持！