编辑推荐: |
文章主要讲解了为什么会产生跨域?本地开发跨域解决方案,云服务器部署时跨域解决方案等相关内容。 本文来自于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 "%r" %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。