方法一：express+http-proxy-middleware
准备的文件：
index.html
index.js文件：在文件中使用express框架搭建服务器。
首先举例遇到的跨域情况：比如在index.html请求http://127.0.0.1:4000/age的数据。
index.html：使用vscode安装的Live Server插件打开，http://127.0.0.1:5500/index.html
axios.get('http://127.0.0.1:4000/age')
.then(value=>{
console.log(value)
})
index.js：
//1.引入express
const express = require('express')
//2.创建服务器应用程序
const app = express()
//3.当服务器接收到请求后执行回调函数
app.get('/age',(request,response)=>{
// response.setHeader('Access-Control-Allow-Origin','*')
const data = '18岁'
response.send(data)
})
然后很明显的报了以下的跨域错误。
简单的一种解决办法，就是在index.js文件中，对请求的url设置CORS：
response.setHeader('Access-Control-Allow-Origin','*')
当然，这种方式不是很好，安全性低。所以采用反向代理方法。
建立一个CrossOriginTest新文件夹进行测试，文件夹目录结构如下：
下载安装http-proxy-middleware插件。html文件放进public文件夹中。
在index.js文件中做如下配置：
const express = require('express')
const app = express()
//app.use(express.static('public')):使用express.static()中间件加载public目录下的静态资源
app.use(express.static(__dirname+'/public'))
//http-proxy-middleware 将接口代理到本地localhost:3000上，
const {createProxyMiddleware} = require('http-proxy-middleware')
const options = {
target:'http://v.juhe.cn', //代理的服务器路径，就是要跨域的服务器地址，可以是域名，也可以是IP地址。如果是域名，那么下面的changeOrigin必须设为true
changeOrigin:true,// 默认false，是否需要改变原始主机头为目标URL
ws:true,
//路径重写，修改最终的请求路径。
//比如在html页面请求的路径是'/api/xxx',经过路径重写后，就变为https://http://v.juhe.cn/xxx
pathRewrite:{
'^/api':''
},
}
const exampleProxy = createProxyMiddleware(options);
///api的作用:如果API中有这个字符串，就会开始代理,或者说是匹配所有以api开头的路径。比如/api/xxx,就会代理到https://http://v.juhe.cn/api/xxx
app.use('/api', exampleProxy);
app.listen(3000,function(){
console.log('服务器已启动')
})
启动index.js文件：nodemon index.js
在浏览器地址栏中输入127.0.0.1:3000/index.html，打开index.html文件。
index.html:换了个新的请求地址
axios.get('/api/historyWeather/weather')
.then(res=>{
console.log(res)
})
在控制台就能看到请求后的数据，没有出现跨域报错。
前面的这种方法还是避免不了前端人员要和后端进行接触，修改后端代码，有点麻烦，并不是一种非常好的解决办法。
方法二：nginx反向代理
1.在nginx官网下载指定安装包，这里我选择的是windows系统的稳定版本。
2.解压文件，得到如下目录结构的文件
3.打开conf-->nginx.config配置文件，配置本地项目访问路径和代理需求。
#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;
server {
# listen 80;
#监听端口默认是80，也可以改成自己想要的端口
listen 3100;
#通过localhost访问
server_name localhost;
#charset koi8-r;
#access_log logs/host.access.log main;
#本地项目部署，将自己的html文件放在html文件夹下，就可以在nginx服务器上运行。原有配置，可以不用动
location / {
root html;
index index.html index.htm;
}
#增加解决跨域配置
#代理服务器访问远程后台接口的配置
location /historyWeather { #nginx代理服务器匹配以/historyWeather开头的路径
#nginx代理服务器在本地访问http://localhost:3100/historyWeather的时候，会将请求转到http://v.juhe.cn/historyWeather
proxy_pass http://v.juhe.cn; # 后端接口 IP:port
}
#error_page 404 /404.html;
# 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;
# }
#}
}
4.启动
启动命令:start nginx
如果配置文件被修改了，需要重新启动。nginx -s reload
退出nginx：nginx -s stop
5.打开部署在ngnix服务器上的本地项目index1.html文件
http://localhost:3100/index1.html
axios.get('/historyWeather/weather')
.then(res=>{
console.log(res)
})
在控制台能成功获取到结果，解决了跨域问题。
nginx启动报错(1113: No mapping for the Unicode character exists in the target multi-byte code page)：文件路径中有中文命名的文件或文件夹，修改成英文即可。
