解决前端和后端分离后，如何跨域调用

本文主要介绍nginx 如何解决前端和后端分离，如何跨域调用的问题；

项目中的经常会遇到前端和后端分离部署在不同的服务器上，或者端口号不同，这种情况会导致前端无法调用到后端，会报错：

NO Access-Control-Allow-Origin 的错误；

上网查询资料，发现有4种方式；

1、第一种方式：

jsonp的，这种方式只支持get，不支持post请求方式

2、第二种方式：

可以配置拦截器，在拦截器中设置消息头

3、第三方式：

cors方式：这种方式配置首先需要下载cors-filter-2.5.jar和java-property-utils1.10.jar导入到项目中，然后在web.xml重配置。

<!--cros filter 配置 跨域请求 filter-->
  <filter>
    <filter-name>CORS</filter-name>
    <filter-class>com.thetransactioncompany.cors.CORSFilter</filter-class>
    <init-param>
      <param-name>cors.allowGenericHttpRequests</param-name>
      <param-value>true</param-value>
    </init-param>
    <init-param>
      <!--cors.allowOrigin指的可以通过的ip，*代表所有，可以使用指定的ip，多个的话可以用逗号分隔，默认为*-->
      <param-name>cors.allowOrigin</param-name>
      <param-value>*</param-value>
    </init-param>
    <init-param>
      <param-name>cors.allowSubdomains</param-name>
      <param-value>false</param-value>
    </init-param>
    <init-param>
      <!--cors.supportedMethods指的是请求方式 默认为*-->
      <param-name>cors.supportedMethods</param-name>
      <param-value>GET, HEAD, POST, OPTIONS</param-value>
    </init-param>
    <init-param>
      <!--cors.supportedHeaders请求支持的头信息，默认为*-->
      <param-name>cors.supportedHeaders</param-name>
      <param-value>*</param-value>
    </init-param>
    <init-param>
      <!--cors.exposedHeaders暴露的头信息，默认的empy list-->
      <param-name>cors.exposedHeaders</param-name>
      <param-value>X-Test-1, X-Test-2</param-value>
    </init-param>
    <init-param>
      <!--cors.supportsCredentials支持证书，默认为true-->
      <param-name>cors.supportsCredentials</param-name>

第四种方式，采用nginx 技术

1、下载nginx

2、解压到非中文目录下

3、修改nginx.config文件中的，将下面的内容直接替换nginx.config里的内容；

worker_processes  1;

events {
    worker_connections  1024;
}

http {
    include       mime.types;
    default_type  application/octet-stream;

    sendfile        on;
    keepalive_timeout  65;

    #前端页面服务器
    server {
        #监听端口和域名
        listen       7000; 
        server_name  localhost;

        #添加头部信息
        proxy_set_header Cookie $http_cookie;
        proxy_set_header X-Forwarded-Host $host;
        proxy_set_header X-Forwarded-Server $host;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        
        #添加拦截路径和代理地址
        location /api/ {              
               proxy_pass http://localhost:8080/;  #注意：使用代理地址时末尾记得加上斜杠"/"。      
        }
        
        #添加拦截路径和根目录
        location / {
               root   html/hehe;  #注意：使用"/"拦截全路径的时候记得放在最后。
               index  index.html index.htm;  #index表示首页 
        }           
        
    }
}

由于时间原因，写的很粗糙，做为自己一个学习笔记，记录下

解决前端和后端分离后，如何跨域调用

猜你喜欢