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