解决几个CORS跨域问题_image.setattribute('crossorigin', 'anonymous')

自己在实际开发中使用canvas.drawImage外域图片，出现了跨域问题；

前端：

image.setAttribute('crossOrigin', 'anonymous');
1

以上这一句可以完美解决canvas引起的前端跨域问题；

网上还有一种方法是，但是我试了无效，也贴出来给大家尝试一下

<meta http-equiv="Access-Control-Allow-Origin" content="*" />
1

Nginx：

因为我使用的是nginx搭建的图片服务器，所以nginx服务器需要更改配置文件nginx.conf

在server下的的location下面添加以下这几句开启nginx的CORS；

nginx.conf：

add_header ‘Access-Control-Allow-Origin’ ‘*’;

add_header ‘Access-Control-Allow-Methods’ ‘GET, POST, OPTIONS, PUT, DELETE’;

add_header ‘Access-Control-Allow-Headers’ ‘Content-Type’;

add_header ‘Access-Control-Allow-Credentials’ ‘true’;

正确添加后配置文件如下：

location / {
    root   g:/nginx/img;
    index  index.html index.htm;

    add_header 'Access-Control-Allow-Origin' '*';
    add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS, PUT, DELETE';
    add_header 'Access-Control-Allow-Headers' 'Content-Type';
    add_header 'Access-Control-Allow-Credentials' 'true';
}
1
2
3
4
5
6
7
8
9

最后重启一下nginx还有重启一下项目就可以解决了。

下面在给大家贴出一些网上找到的springboot后端需要配置的一些方法

（我实际上使用后不影响，我使用上面两个步骤就能解决问题了，需要的可以拿去试一下）

第一种：

@Configuration
public class MyConfig {
    private CorsConfiguration buildConfig() {
        CorsConfiguration corsConfiguration = new CorsConfiguration();
        corsConfiguration.setAllowCredentials(true);
        corsConfiguration.addAllowedOrigin("*");
        corsConfiguration.addAllowedHeader("*");
        corsConfiguration.addAllowedMethod("*");
        return corsConfiguration;
    }


    @Bean
    public CorsFilter corsFilter() {
        UrlBasedCorsConfigurationSource source = new UrlBasedCorsConfigurationSource();
        // 配置所有请求
        source.registerCorsConfiguration("/**", buildConfig());
        return new CorsFilter(source);
    }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

第二种：

package com.pang.flower.Config;

import java.io.IOException;

import javax.servlet.Filter;
import javax.servlet.FilterChain;
import javax.servlet.FilterConfig;
import javax.servlet.ServletException;
import javax.servlet.ServletRequest;
import javax.servlet.ServletResponse;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

import org.slf4j.Logger;
import org.slf4j.LoggerFactory;
import org.springframework.stereotype.Component;


@Component
public class CrossFilter implements Filter {
    private static Logger logger = LoggerFactory.getLogger(CrossFilter.class);

    @Override
    public void init(FilterConfig filterConfig) throws ServletException {
    }
    @Override
    public void destroy() {
    }
    @Override
    public void doFilter(ServletRequest request, ServletResponse response,
                         FilterChain chain) throws IOException, ServletException {
        logger.debug("跨域请求进来了。。。");
        HttpServletRequest httpServletRequest = (HttpServletRequest) request;
        httpServletRequest.getSession();
        HttpServletResponse httpResponse = (HttpServletResponse) response;
        httpResponse.setHeader("Access-Control-Allow-Origin", "*");
        httpResponse.setHeader("Access-Control-Allow-Methods", "*");
        httpResponse.setHeader("Access-Control-Max-Age", "3600");
        httpResponse.setHeader("Access-Control-Allow-Headers",
                "Origin, X-Requested-With, Content-Type, Accept, Connection, User-Agent, Cookie");
        httpResponse.setHeader("Access-Control-Allow-Credentials", "true");
        httpResponse.setHeader("Content-type", "application/json");
        httpResponse.setHeader("Cache-Control", "no-cache, must-revalidate");
        chain.doFilter(request, httpResponse);
    }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46