您现在的位置是：首页 > 域名 > 正文

域名

Nginx指定多个域名跨域请求配置

1987web2022-12-29域名239

nginx指定多个域名跨域请求配置

什么是跨域

假设我们页面或者应用已在http://www.test1.com上了，而我们打算从http://www.test2.com请求提取数据。一般情况下，如果我们直接使用 AJAX 来请求将会失败，浏览器也会返回源不匹配的错误，"跨域"也就以此由来。跨域的出现主要原因还是安全的限制(同源策略，也就是JavaScript或者Cookie只能够访问同域下的内容)，因此在日常的项目开发中会不可避免的出现跨域操作。和打多数跨域的解决方案一样，JSONP是大多数前端同事的选择，但是JSONP只支持GET请求。但是如果项目功能需要改成支持POST请求,那么因为这种情况下传输的数据量较大，GET形式是搞不定的。此时JSONP并不是一个很好的选择。此时就需要使用CORS(跨域资源共享，Cross-Origin Resource Sharing).

一般跨域会出现的问题

一般来说，跨域会出现如下的问题：

实际项目中出现的问题

先前配置中有如下的域名：

http://browser.in.meizu.com是向客户端或者是H5提供接口访问的后台域名，browser-res.in.meizu.com,http://v-res.in.meizu.com都是提供给h5端的入口访问域名。先前在nginx中有如下的配置：

如果设置了这个配置，那么如果前端的入口是browser-res.in.meizu.com,那么它是可以访问到http://browser.in.meizu.com提供的接口的。前端同学用了http://v-res.in.meizu.com这个域名作为h5端访问入口，访问http://browser.in.meizu.com，由于此时nginx并没有相关的配置，因此出现了如下的问题：

很明显,这个问题并不是说原程序没有设置"add_header Access-Control-Allow-Origin:"。我们看前面的nginx中的配置，已经设置了http://browser-res.in.meizu.com可以访问http://browser.in.meizu.com。但是现在的一个问题是前端的同学使用了 "http://v-res.in.meizu.com" 这个域名作为前端的入口,所以就出现了以上的问题：http://browser-res.in.meizu.com是可以访问http://browser.in.meizu.com。但是http://v-res.in.meizu.com不可以访问browser.in.meizu.com.但是当时考虑问题只是认为是简单的跨域问题,没有考虑到在nginx中的配置,所以就简单的使用了过滤器来进行解决.

/**
* 跨域访问时允许对服务端提交请求过滤器
* @author liguo
* @date 2017-12-31
*
*/
public class CrossDomainFilter implements Filter {


@Override
public void init(FilterConfig filterConfig) throws ServletException {
}

@Override
public void doFilter(ServletRequest request, ServletResponse response, FilterChain chain)
throws IOException, ServletException {
//跨域访问转换
HttpServletResponse httpResponse = (HttpServletResponse) response;
httpResponse.setHeader("Access-Control-Allow-Origin","*");
chain.doFilter(request, response);
}


/*
* (non-Javadoc)
* @see javax.servlet.Filterdestroy()
*/
@Override
public void destroy() {
}


}

然后在web.xml中配置这个过滤器。尝试使用过滤器来解决这个问题，在本地联调时没有出现问题。后来部署到测试环境后，出现了以下的问题：