您可以捐助,支持我们的公益事业。

1元 10元 50元





认证码:  验证码,看不清楚?请点击刷新验证码 必填



  求知 文章 文库 Lib 视频 iPerson 课程 认证 咨询 工具 讲座 Model Center   Code  
会员   
   
 
     
   
 订阅
  捐助
Tomcat+Nginx反向代理部署前后端分离项目解决跨域问题
 
作者:yunnansts
  2466  次浏览      16
2020-6-22 
 
编辑推荐:
文章主要讲解了为什么会产生跨域?本地开发跨域解决方案,云服务器部署时跨域解决方案等相关内容。
本文来自于csdn,由火龙果软件Anna编辑推荐。

最近自己做了一个前后端分离项目,前端采用HBuilder X开发,后端采用IDEA开发,在本地开发也跨域,部署到云服务器也跨域,下面介绍两种解决方案。

为什么会产生跨域?

出于浏览器的同源策略限制。同源策略(Sameoriginpolicy)是一种约定,它是浏览器最核心也最基本的安全功能,如果缺少了同源策略,则浏览器的正常功能可能都会受到影响。可以说Web是构建在同源策略基础之上的,浏览器只是针对同源策略的一种实现。同源策略会阻止一个域的javascript脚本和另外一个域的内容进行交互。所谓同源就是两个页面或者前后端的两个地址具有相同的协议(protocol),主机(host)和端口号(port)。

1、本地开发跨域解决方案

首先在前端接口请求接口下面加上如下配置

//允许跨域
xhrFields: {
withCredentials: true
},
crossDomain: true,

如图所示:

下面还需要在后端代码部分加上允许跨域代码

response.setHeader ("Access-Control-Allow-Origin", request.getHeader ("Origin"));
response.setHeader ("Access-Control-Allow-Methods", "POST, GET, OPTIONS, DELETE");
response.setHeader ("Access-Control-Max-Age", "0");
response.setHeader ("Access-Control-Allow-Headers", "Origin, No-Cache, X-Requested-With, If-Modified-Since, Pragma, Last-Modified, Cache-Control, Expires, Content-Type, X-E4M-With,userId,token,Access-Control-Allow-Headers");
response.setHeader ("Access-Control-Allow-Credentials", "true");
response.setHeader ("XDomainRequestAllowed","1");

如下图所示,我的解决办法是吧该部分代码封装成一个类,然后每一个controller类继承一下就完事啦

下面是controller类继承我写的BaseController类

这样本地开发跨域就完美解决啦

2、云服务器部署时跨域解决方案

部署环境:腾讯云Windows服务器

先进入远程管理桌面安装以下部署环境

首先 得安装jdk1.8,Tomcat8.0,数据库我用的是sql server2012,nginx代理服务器

(1)jdk1.8下载地址:链接

提取码:y1do,怎么安装自行百度吧

(2)Tomcat8.0下载地址:链接

提取码:fg7n,怎么安装自行百度吧(注意:在安装的时候吧Tomcat服务改为自启)

接下来进入默认安装位置C:\Program Files\Apache Software Foundation\Tomcat 8.0\conf找到server.xml进行如下配置

1、这里端口我用的是默认8080口,你们可以配置成其他的
<Connector port="8080" protocol="HTTP/1.1"
connectionTimeout="20000"
redirectPort="8443" />

2、找到该位置,把你们事先备案、解析好的域名写在defaultHost=""中
<Engine name="Catalina" defaultHost="www.baidu.com">


3、host这里配置一下name就可以了,其他不用管,在name=""填入域名
<Host name="www.baidu.com" appBase="webapps"
unpackWARs=" true" autoDeploy="true">


<Valve className= "org.apache.catalina.valves.AccessLogValve" directory="logs"
prefix="localhost_access_log" suffix=".txt"
pattern="%h %l %u %t &quot;%r&quot; %s %b" />

4、下面的<Context path="" docBase ="" reloadable=" false"></Context>默认安装是没有的,
自行加进去,这里需要配置path=""虚拟路径,这里自行定义一个就可以,不过要和nginx配置成一样的,
下面会讲,其次就是配置 docBase =""访问项目名,也就是你在C:\Program Files\Apache Software Foundation\Tomcat 8.0\webapps路径下的项目war包(test.war)
<Context path="/apis" docBase ="test" reloadable=" false"></Context>
</Host>

配置完成,将你的项目war包放在C:\Program Files\Apache Software Foundation\Tomcat 8.0\webapps路径下,如图:

好了,Tomcat配置完成需要在远程桌面的C:\Windows\System32\drivers\etc路径下找到hosts配置文件进行如下配置,把172.0.0.1 localhost改为改为你的服务器IP和域名,如xxx.xxx.xxx.xxx www.baidu.com,这里是配置域名映射

现在Tomcat就配置完成

(3)nginx安装配置,官网下载地址:http://nginx.org/en/download.html,找一个适合Windows系统的nginx(稳定版)安装包下载自行百度安装

接下载进入安装路径C:\Program Files\Nginx\conf找到nginx.conf配置文件进行以下配置

#user nobody;
worker_processes ?1;
#error_log logs/error.log;
#error_log logs/error.log ?notice;
#error_log logs/error.log ?info;
#pid logs/nginx.pid;events {
worker_connections 1024;
}


http {
include mime.types;
default_type application/octet-stream;
#log_format main '$remote_addr - $remote_user [$time_local] "$request" '
# '$status $body_bytes_sent "$http_referer" '
# '"$http_user_agent" "$http_x_forwarded_for"';
#access_log ?logs/access.log ?main;
sendfile on;
#tcp_nopush on;
#keepalive_timeout ?0;
keepalive_timeout ?65;
#gzip on;

upstream apis {
#同一IP访问相同主机
ip_hash;
#weigth参数表示权值,权值越高被分配到的几率越大
server localhost:8080 weight=5;
}
server {
listen 8890;
server_name www.baidu.com;
#编码格式,避免url参数乱码
charset utf-8;
#charset koi8-r;
#access_log ?logs/host.access.log ?main;
location /apis {
proxy_pass http://apis;
proxy_set_header Host $host;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
proxy_set_header X-Forwarded-Proto $scheme;
proxy_buffer_size 64k;
proxy_buffers 4 128k;
proxy_busy_buffers_size 256k;
}
location / {
root html;
#允许跨域访问
add_header 'Access-Control-Allow-Origin' '*';
index index.html index.htm;
}

#error_page 404 /index.html;
#location = /index.html {
# root html/page/404/;
# }
# redirect server error pages to the static page /50x.html
#
error_page ? 500 502 503 504 ?/50x.html;
location = /50x.html {
root html;
}
# proxy the PHP scripts to Apache listening on 127.0.0.1:80
#
#location ~ \.php$ {
# proxy_pass ? http://127.0.0.1;
#}
# pass the PHP scripts to FastCGI server listening on 127.0.0.1:9000
#
#location ~ \.php$ {
# root html;
# fastcgi_pass 127.0.0.1:9000;
# fastcgi_index index.php;
# fastcgi_param SCRIPT_FILENAME ?/scripts$fastcgi_script_name;
# include fastcgi_params;
#}
# deny access to .htaccess files, if Apache's document root
# concurs with nginx's one
#
#location ~ /\.ht {
# deny ?all;
#}
}
# another virtual host using mix of IP-, name-, and port-based configuration
#
#server {
# listen 8000;
# listen somename:8080;
# server_name ?somename ?alias ?another.alias;
# location / {
# root html;
# index ?index.html index.htm;
# }
#}
# HTTPS server
#
#server {
# listen 443 ssl;
# server_name localhost;
# ssl_certificate cert.pem;
# ssl_certificate_key cert.key;
# ssl_session_cache shared:SSL:1m;
# ssl_session_timeout ?5m;
# ssl_ciphers ?HIGH:!aNULL:!MD5;
# ssl_prefer_server_ciphers ?on;
# location / {
# root html;
# index index.html index.htm;
# }
#}
}

 

在配置文件中加入如下配置,apis是上面Tomcat配置的虚拟路径,8080口是Tomcat的配置口,weight是分配权值配置

配置nginx的监听口8890(随意配置,别忘了在防火墙的高级配置/入站规则中也要放行高端口,自行百度防火墙开端口),还要配置你的域名

接下来配置反向代理(注意apis是Tomcat的虚拟路径,跟上面要同步)

这里配置完成将你的静态资源放在?C:\Program Files\Nginx\html的html的根目录下,这样反向代理就算配置完成!!!

最后别忘了更改你的访问请求路径,如下:

浏览器输入:https://域名:端口/就可以访问你的项目首页index.html。

 

 

   
2466 次浏览       16
????

HTTP????
nginx??????
SD-WAN???
5G?????
 
????

??????????
IPv6???????
??????????
???????
????

????????
????????
???????????????
??????????
最新活动计划
Node+Vue3.0前端全栈开发 7-5 [特惠]
Spring Cloud微服务架构 7-5[特惠]
SysML和EA系统设计与建模 7-26[特惠]
Python、数据分析与机器学习 8-23[特惠]
嵌入式软件架构设计 8-22[线上]
Linux内核编程及设备驱动 7-25[北京]
 
最新文章
云原生架构概述
K8S高可用集群架构实现
容器云管理之K8S集群概述
k8s-整体概述和架构
十分钟学会用docker部署微服务
最新课程
云计算、微服务与分布式架构
企业私有云原理与构建
基于Kubernetes的DevOps实践
云平台架构与应用(阿里云)
Docker部署被测系统与自动化框架实践
更多...   
成功案例
北京 云平台与微服务架构设计
通用公司GE Docker原理与实践培训
某军工研究单位 MDA(模型驱动架构)
知名消费金融公司 领域驱动设计
深圳某汽车企业 模型驱动的分析设计
更多...