本文主要介绍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表示首页 } } }
由于时间原因,写的很粗糙,做为自己一个学习笔记,记录下