vue请求跨域问题

版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/qq_30641447/article/details/84993516

index.js

index.js添加代理

然后在请求的接口前缀加上/api

由于我这边的接口也是api 所以两个api

按个人需求，如果请求接口是 /get/userIf，那么需求修改为/api /get/userIf

npm run dev 重启即可

以上方式可以解决我们在vue项目中开发环境的跨域问题，但是无法解决生产环境上的跨域问题，有的时候生产环境上也需要处理跨域问题，这个时候proxyTable就不管用咯，nginx就闪亮登场了~

Nginx：

1、 http服务器，可以独立提供http服务；

2、 虚拟主机：多个域名指向同一个服务器，服务器根据不同的域名把请求转发到不同的应用服务器；

3、 反向代理：负载均衡，将请求转发至不同的服务器

跨域配置项

解决跨域问题，主要是更改nginx的配置文件nginx.conf，通过配置修改地址的转发。

// 默认配置
    location / {
        root   html; #文件根目录
        index  index.html index.htm; #默认起始页
    }

如此，可以将vue打包后的文件放到nginx的html文件夹中，也可以将root的指向打包后的文件夹，用于快速创建http服务器。还是上面的案例，把proxyTable中的配置全部删除，然后nginx中增加配置如下：

location / {
  root   D:\cross-demo\dist #直接指向打包后的文件
  index  index.html index.htm;
 }

location /api/ {
  proxy_pass http://localhost:8888/; # 将地址代理到api上
 }

访问http://localhost/ （访问nginx的http服务）

跨域成功！

虚拟主机配置项

server
    {
        #监听端口
        listen 80; 

        #服务访问域名
        server_name localhost; 

        location /api/ { 
            # 反向代理的地址
            proxy_pass http://localhost:8888/; 

            # 对发送给客户端的URL进行修改
            proxy_redirect off; 
             
            # 后端的Web服务器可以通过X-Forwarded-For获取用户真实IP
            proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;   

            # 允许客户端请求的最大单文件字节数
            client_max_body_size 10m;  
 
            # 缓冲区代理缓冲用户端请求的最大字节数      
            client_body_buffer_size 128k;

            # 表示使nginx阻止HTTP应答代码为400或者更高的应答。
            proxy_intercept_errors on;

            # nginx跟后端服务器连接超时时间
            proxy_connect_timeout 90;

            # 后端服务器数据回传超时时间
            proxy_send_timeout 90;

            # 连接成功后，后端服务器响应超时时间
            proxy_read_timeout 90;

            # 设置代理服务器（nginx）保存用户头信息的缓冲区大小
            proxy_buffer_size 4k;
           
            # 设置用于读取应答（来自被代理服务器）的缓冲区数目和大小
            # 默认情况也为分页大小，根据操作系统的不同可能是4k或者8k
            proxy_buffers 4 32k;

            # 高负荷下缓冲大小（proxy_buffers*2）
            proxy_busy_buffers_size 64k;

            # 设置在写入proxy_temp_path时数据的大小，预防一个工作进程在传递文件时阻塞太长
            proxy_temp_file_write_size 64k;
        }       
        
    }
}

常见配置

location /api/ {  
    proxy_pass http://localhost:8888/;
    proxy_pass_request_headers on;
    proxy_set_header Connection "";       
    client_max_body_size    30m;
    client_body_buffer_size 128k; 
    proxy_redirect off;
    proxy_connect_timeout   300;
    proxy_send_timeout      300;
    proxy_read_timeout      300;
    proxy_buffer_size       4k;
    proxy_buffers           4 32k;
    proxy_busy_buffers_size 64k;
    proxy_temp_file_write_size 64k;
    proxy_next_upstream http_502 http_504 error invalid_header; 
}

般情况下，解决前端跨域直接使用这些配置就足够了，了解各配置项含义，更易于理解。更改location后的转发代理地址即可。

原文：http://www.cnblogs.com/webhmy/p/9340361.html

后端解决跨域问题：

/** 
 * Title: 跨域访问处理(跨域资源共享) 
 * Description: 解决前后端分离架构中的跨域问题
 * @author rico 
 * @created 2017年7月4日 下午5:00:09 
 */ 
public class CorsFilter implements Filter {
     /** Log4j日志处理(@author: rico) */
     private static final Logger log = Logger.getLogger(UserController.class);
     private String allowOrigin;
     private String allowMethods;
     private String allowCredentials;
     private String allowHeaders;
     private String exposeHeaders;
     @Override
     public void init(FilterConfig filterConfig) throws ServletException {
         allowOrigin = filterConfig.getInitParameter("allowOrigin");
         allowMethods = filterConfig.getInitParameter("allowMethods");
         allowCredentials = filterConfig.getInitParameter("allowCredentials");
         allowHeaders = filterConfig.getInitParameter("allowHeaders");
         exposeHeaders = filterConfig.getInitParameter("exposeHeaders");
     }
     /** 
     * @description 通过CORS技术实现AJAX跨域访问,只要将CORS响应头写入response对象中即可
     * @author rico 
     * @created 2017年7月4日 下午5:02:38 
     * @param req
     * @param res
     * @param chain
     * @throws IOException
     * @throws ServletException 
     * @see javax.servlet.Filter#doFilter(javax.servlet.ServletRequest,         javax.servlet.ServletResponse, javax.servlet.FilterChain) 
     */ 
     @Override
     public void doFilter(ServletRequest req, ServletResponse res,
     FilterChain chain) throws IOException, ServletException {
         HttpServletRequest request = (HttpServletRequest) req;
         HttpServletResponse response = (HttpServletResponse) res;
         String currentOrigin = request.getHeader("Origin");
         log.debug("currentOrigin : " + currentOrigin);
         if (StringUtil.isNotEmpty(allowOrigin)) {
             List<String> allowOriginList = Arrays.asList(allowOrigin.split(","));
             log.debug("allowOriginList : " + allowOrigin);
             if (CollectionUtil.isNotEmpty(allowOriginList)) {
                 if (allowOriginList.contains(currentOrigin)) {
                 response.setHeader("Access-Control-Allow-Origin",currentOrigin);
                 }
             }
         }
         if (StringUtil.isNotEmpty(allowMethods)) {
             response.setHeader("Access-Control-Allow-Methods", allowMethods);
         }
         if (StringUtil.isNotEmpty(allowCredentials)) {
             response.setHeader("Access-Control-Allow-Credentials", allowCredentials);
         }
         if (StringUtil.isNotEmpty(allowHeaders)) {
             response.setHeader("Access-Control-Allow-Headers", allowHeaders);
         }
         if (StringUtil.isNotEmpty(exposeHeaders)) {
             response.setHeader("Access-Control-Expose-Headers", exposeHeaders);
         }
         chain.doFilter(req, res);
     }
     @Override
     public void destroy() {
     }
}

以上CorsFilter将从web.xml中读取相关Filter初始化参数，并将在处理HTTP请求时将这些参数写入对应的CORS响应头中，下面大致描述一下这些CORS响应头的意义：

Access-Control-Allow-Origin：允许访问的客户端域名，例如：http://web.xxx.com，若为*，则表示从任意域都能访问，即不做任何限制；
Access-Control-Allow-Methods：允许访问的方法名，多个方法名用逗号分割，例如：GET,POST,PUT,DELETE,OPTIONS；
Access-Control-Allow-Credentials：是否允许请求带有验证信息，若要获取客户端域下的cookie时，需要将其设置为true；
Access-Control-Allow-Headers：允许服务端访问的客户端请求头，多个请求头用逗号分割，例如：Content-Type；
Access-Control-Expose-Headers：允许客户端访问的服务端响应头，多个响应头用逗号分割。
需要注意的是，CORS规范中定义Access-Control-Allow-Origin只允许两种取值，要么为*，要么为具体的域名，也就是说，不支持同时配置多个域名。为了解决跨多个域的问题，需要在代码中做一些处理，这里将Filter初始化参数作为一个域名的集合（用逗号分隔），只需从当前请求中获取Origin请求头，就知道是从哪个域中发出的请求，若该请求在以上允许的域名集合中，则将其放入Access-Control-Allow-Origin响应头，这样跨多个域的问题就轻松解决了。以下是web.xml中配置CorsFilter的方法：

<!-- 通过CORS技术实现AJAX跨域访问 --> 
<filter>
     <filter-name>corsFilter</filter-name>
     <filter-class>cn.edu.tju.rico.filter.CorsFilter</filter-class>
     <init-param>
         <param-name>allowOrigin</param-name>
         <param-value>http://localhost:8020</param-value>
     </init-param>
     <init-param>
         <param-name>allowMethods</param-name>
         <param-value>GET,POST,PU</param-value>
    </init-param>
 </filter>