nginx/apache增加头或者反向代理,后端语言代码php、java、go ，前端，浏览器端五种不同方式解决跨域配置

这里举例都是配置域名使用通配*号，如果需要单独配置特定域名，自己查下相关文档即可。

1、nginx配置文件增加 跨域配置
```
server{

}
```
或者
```
location /api{

}
```
里边加入如下配置 
```
 add_header 'Access-Control-Allow-Origin' '*';
 add_header 'Access-Control-Allow-Credentials' 'true';
 # 为预检请求加的header
 add_header 'Access-Control-Allow-Methods' 'GET, POST, PUT, DELETE';
 #为预检请求加的header
 add_header 'Access-Control-Allow-Headers' '*';
```

2、apache配置文件，配置跨域
```
<IfModule mod_headers.c>
Header always add Access-Control-Allow-Origin: "*"
Header always add Access-Control-Allow-Methods: "GET,POST,PUT,DELETE,HEAD,OPTIONS"
Header always add Access-Control-Max-Age: "1000"
Header always add Access-Control-Allow-Credentials: "true"
Header always add Access-Control-Allow-Headers: "Origin, X-Requested-With, Content-Type, Accept, token, platform"
</IfModule>
```

3、后端php 配置跨域
入口文件或者接口文件加上返回头信息
```
header('Access-Control-Allow-Origin: *');
```

4、go跨域
```
// 处理跨域请求,支持options访问
func Cors() gin.HandlerFunc {
	return func(c *gin.Context) {
		//Access-Control-Allow-Credentials=true和Access-Control-Allow-Origin="*"有冲突
		//故Access-Control-Allow-Origin需要指定具体得跨域origin
		c.Header("Access-Control-Allow-Origin", "http://www.ww4k.com:8000")
		c.Header("Access-Control-Allow-Credentials", "true")
		c.Header("Access-Control-Allow-Headers", "content-type")
		c.Header("Access-Control-Allow-Methods", "GET,POST,PUT,DELETE")
		//c.Header("Access-Control-Expose-Headers", "*")
		if c.Request.Method == "OPTIONS" {
			c.JSON(http.StatusOK, "")
			c.Abort()
			return
		}
		c.Next()
	}
}
```

5、java配置跨域
使用Filter过滤器来过滤服务请求，向请求端设置Response Header(响应头部)的Access-Control-Allow-Origin属性声明允许跨域访问。
```
@WebFilter
public class CorsFilter implements Filter {

@Override
    public void doFilter(ServletRequest req, ServletResponse res, FilterChain chain) throws IOException, ServletException {  
        HttpServletResponse response = (HttpServletResponse) res;  
        response.setHeader("Access-Control-Allow-Origin", "*");  
        response.setHeader("Access-Control-Allow-Methods", "*");  
        response.setHeader("Access-Control-Max-Age", "3600");  
        response.setHeader("Access-Control-Allow-Headers", "*");
        response.setHeader("Access-Control-Allow-Credentials", "true");
        chain.doFilter(req, res);  
    }  
}

```

6、服务端配置反向代理 解决跨域
```
location ^~ /api
{
    proxy_pass https://www.ww4k.com/api;
    proxy_ssl_server_name  on;
    proxy_set_header Host www.ww4k.com;
    proxy_set_header X-Real-IP $remote_addr;
    proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
    proxy_set_header REMOTE-HOST $remote_addr;
    proxy_set_header Upgrade $http_upgrade;
    proxy_set_header Connection $connection_upgrade;
    # proxy_hide_header Upgrade;

add_header X-Cache $upstream_cache_status;

#Set Nginx Cache
    
    set $static_filesld8y0oG 0;
    if ( $uri ~* "\.(gif|png|jpg|css|js|woff|woff2)$" )
    {
    	set $static_filesld8y0oG 1;
    	expires 12h;
        }
    if ( $static_filesld8y0oG = 0 )
    {
    	add_header Cache-Control no-cache;
    }
}

```

7、apache反向代理 解决跨域

```
#PROXY-START/
<IfModule mod_proxy.c>
    ProxyRequests Off
    SSLProxyEngine on
    ProxyPass /api http://127.0.0.1:58760
    ProxyPassReverse /api http://127.0.0.1:58760
</IfModule>

```

8、前端解决跨域
vue.config.js
```
module.exports = {
  dev: {
    // Paths
    assetsSubDirectory: 'static',
    assetsPublicPath: '/',
    proxyTable: { // 配置跨域
    '/api':{
        target:`http://www.ww4k.com/`, //请求后台接口
        changeOrigin:true, // 允许跨域
        pathRewrite:{
            '^/api' : '' // 重写请求
        }
    }
  },
}
```

9、chrome浏览器配置参数解决跨域
在chrome浏览器快捷方式的程序路径中增加启动参数
```
--disable-web-security --user-data-dir=E:\MyChromeUserData
```
MyChromeUserData 为浏览器当前用户数据目录。指定不同的目录可以相当于是启动一个全新的chrome进程。有时候也可以用于测试多端同时登录时的浏览器多开。

### 利弊分析
以上9种方法各有利弊，实际开发中可以根据需要选择相应的配置方法。以下对比各个方法的优缺点。大家可以根据需要来选择：

对于方法（1和2）：一般像nginx、apache配置头部分信息）的方法比较适合于在配置后端站点时使用。这个时候可以指定特定域名可连接或者所有域名均可连接。

对于方法（6和7）：则和1跟2相当反，是在配置前端站点时进行配置反向代理。解决前端代码访问这些外部域名时的跨域问题。

对于方法（3、4和5）：则是在开发的时候在代码层级直接加入相应的头，允许跨域访问。这种情况下对于后期配置比较友好。缺点是安全性不好。

对于方法8： 适用于前端开发人员在前端开发时，临时解决跨域问题。优点是前端自己就可以搞定。缺点是上线之后这个配置不起作用。仍然需要借助其它方法来解决。

对于方法9：也是前端临时调试使用的方法，也比较好用。但缺点也是上线之后需要用其它方法来解决。

nginx/apache增加头或者反向代理,后端语言代码php、java、go ，前端，浏览器端五种不同方式解决跨域配置

添加新评论

关于博主

文章分类

最受欢迎的文章

最近回复

其它

nginx/apache增加头或者反向代理,后端语言代码php、java、go ，前端 ，浏览器端五种不同方式解决跨域配置

添加新评论

关于博主

文章分类

最受欢迎的文章

最近回复

其它

nginx/apache增加头或者反向代理,后端语言代码php、java、go ，前端，浏览器端五种不同方式解决跨域配置