如何解决跨域问题

跨域是什么

由于浏览器的同源策略，浏览器不能执行其他网站的脚本
当一个请求的url的协议，域名，端口有一个不一致时，都是跨域

注意事项

①有且仅能有一个跨域配置，多了，少了都会报跨域问题
②一般情况下，跨域配置不写在代码里，在代理里配置

如何解决跨域问题

方式一：nginx代理

参考链接1
参考链接2

server {
    listen       22222;
    server_name  localhost;
    location  / {
        add_header Access-Control-Allow-Origin 'http://localhost:8080' always;
        add_header Access-Control-Allow-Headers '*';
        add_header Access-Control-Allow-Methods '*';
        add_header Access-Control-Allow-Credentials 'true';
        if ($request_method = 'OPTIONS') {
            return 204;
        }
        proxy_pass  http://localhost:59200;
    }
}

方式二：后端代码配置

通过在被请求的路由中设置header头，服务端响应的时候添加一个 Access-Control-Allow-Origin 的响应头，允许任何域名来访问

@Component
class CrossFilter : Filter {
    @Throws(ServletException::class)
    override fun init(filterConfig: FilterConfig?) {
        super.init(filterConfig)
    }

    @Throws(IOException::class, ServletException::class)
    override fun doFilter(servletRequest: ServletRequest?, servletResponse: ServletResponse, filterChain: FilterChain) {
        val response = servletResponse as HttpServletResponse
        //允许任何域名来访问
        response.setHeader("Access-Control-Allow-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,content-type")
        filterChain.doFilter(servletRequest, servletResponse)
    }

    override fun destroy() {
        super.destroy()
    }
}