ajax cross domain problem

No ‘Access-Control-Allow-Origin’ header is present on the requested resource

The separation of front and back ends will cause cross-domain problems.
Reasons for cross-domain problems:
1. Browser restrictions
2. Cross-domain: if the outgoing request is different from the listening server, protocol, domain name, or port, it will cause cross-domain problems.
3. Only if the xmlHttpRequest request
is satisfied at the same time, cross-domain security problems may occur.

Solution

1. Register a filter and add a response header to tell the browser to allow cross-domain

Cross-Origin for Simple Requests

package com.ajax.ajaxdemo;

import org.springframework.boot.SpringApplication;
import org.springframework.boot.autoconfigure.SpringBootApplication;
import org.springframework.boot.web.servlet.FilterRegistrationBean;
import org.springframework.context.annotation.Bean;

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

@SpringBootApplication
public class AjaxDemoApplication {

    public static void main(String[] args) {
        SpringApplication.run(AjaxDemoApplication.class, args);
    }

    @Bean
    public FilterRegistrationBean registerFilter() {
        FilterRegistrationBean bean = new FilterRegistrationBean();
        //拦截所有请求
               bean.addUrlPatterns("/*");
        bean.setFilter(new Filter() {
            @Override
            public void init(FilterConfig filterConfig) throws ServletException {

            }

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

                //表示允许来自"http://localhost:8081"的请求
                res.addHeader("Access-Control-Allow-Origin", "http://localhost:8081");
                //表示允许跨域的请求的方法
                res.addHeader("Access-Control-Allow-Methods", "Get");
                filterChain.doFilter(servletRequest,servletResponse);
            }

            @Override
            public void destroy() {

            }
        });
        return bean;
    }
}

Cross-origin for complex requests

往之前的fiter里添加上这一句，表示可以允许复杂请求跨域
 res.addHeader("Access-Control-Allow-Headers","Content-Type");

Cross-domain requests with cookies
In the previous origin, the source of allowed cross-domain requests can be represented by wildcard *, allowing all domains to make cross-domain requests, but if it is a cross-domain request with cookies, it can only clearly indicate the domain source, not Use wildcards

 res.addHeader("Access-Control-Allow-Origin", "http://localhost:8081");

and need to add

res.addHeader("Access-Control-Allow-Credentials","true");

How to allow all domains with cookies? When the
browser finds that the request is cross-domain, it will add the Origin field to the request header. As long as the filter gets this field, it can be used as an allowed source. (Poor textual expression)
See the doFilter method

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

                HttpServletRequest req = (HttpServletRequest) servletRequest;

                String origin = req.getHeader("Origin");

                if (!origin.isEmpty()){
                    //表示允许来自"http://localhost:8081"的请求
                    res.addHeader("Access-Control-Allow-Origin", origin);
                }

                //表示允许跨域的请求的方法
                res.addHeader("Access-Control-Allow-Methods", "Get");

                res.addHeader("Access-Control-Allow-Headers","Content-Type");
                filterChain.doFilter(servletRequest, servletResponse);
            }

2. Spring solves cross-domain problems

Just add the @CrossOrigin annotation directly on the class or method.