前端解决跨域问题
第一种方案 node 代理
1、安装node (^10.0版本以上)
2、使用NodeJs反向代理http请求
3、nodejs项目路径下初始化
npm init 然后 一路回车
4、使用npm包管理器安装express和http中间件代理模块
npm install express http-proxy-middleware --save-dev
5、新建 server.js
里面写入
中间件 http-proxy-middleware 原理和用法(https://www.cnblogs.com/zhaoweikai/p/9969282.html)
6、启动node 服务
node server.js
访问 http://ip:port/index.html
7、查看静态资源 跨域的问题
第二种方案
思路
Nginx 具体配置如下:
server {
listen 83;
server_name iot.inteliot.net;
# Load configuration files for the default server block.
include /etc/nginx/default.d/*.conf;
# gzip config
gzip on;
gzip_min_length 1k;
gzip_comp_level 9;
gzip_types text/plain application/javascript application/x-javascript text/css application/xml text/javascript application/x-httpd-php image/jpeg image/gif image/png;
gzip_vary on;
gzip_disable "MSIE [1-6]\.";
location ^~ /sea/ {
# 用于配合 browserHistory 使用
proxy_pass http://ip:82/;
proxy_set_header X-Real-IP $remote_addr;
proxy_set_header Host $http_host;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
# 如果有资源,建议使用 https + http2,配合按需加载可以获得更好的体验
# rewrite ^/(.*)$ https://myzuul.com:9527/$1 permanent;
}
location ^~ /ui/ {
add_header 'Access-Control-Allow-Origin' *;
add_header 'Access-Control-Allow-Credentials' 'true';
add_header 'Access-Control-Allow-Methods' 'GET,POST,OPTIONS';
proxy_pass http://ip:5601/;
proxy_set_header X-Real-IP $remote_addr;
proxy_set_header Host $http_host;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
}
}
在我们阿里云(已开放83端口)上测试的
接口换成 83 http://ip:83/ui/internal/search/es
页面也可以换成 83 http://ip:83/sea/searchui.html
不虚度光阴,享受生命里的每一天!