写服务器写接口模拟后端
首先自己用node写了一个服务器接口,前提安装了node.js
npm init -y
npm i express
创建app.js
const express = require("express");
const app = express();
app.get("/getList", (req, res) => {
res.send({
status: 0,
message: "请求成功",
data: [
{ id: 1, name: "张三", age: 20 },
{ id: 2, name: "李四", age: 22 },
{ id: 3, name: "王五", age: 23 },
]
})
})
app.listen(666, () => {
console.log("http://localhost:666/getList");
})
node app.js运行成功,接口创建成功
跨域啊跨域
前端创建index..html运行,发起请求,就看到跨域
nginx实现跨域
安装官网 nginx: download
启动nginx
解压双击nginx.exe
找到nginx解压目录下,鼠标右键,找到git bash
打开(没有git工具那就打开命令行进入当前目录)输入命令start ./nginx.exe
回车即启动了nginx服务.
输入localhost回车看下图,启动成功
修改配置
在安装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;
server_names_hash_bucket_size 128;
server {
listen 80;
server_name localhost;
location / {
root html;
index index.html index.htm;
}
error_page 500 502 503 504 /50x.html;
location = /50x.html {
root html;
}
}
server {
listen 8888;
server_name test-local.test.com;
# 这里是你要代理的测试环境域名加上-local
# 比如你的项目测试环境为a.test.com,你本地此处可以设置为a-local.test.com,当然你可以随便设置
#这里说明了如果是http://test-local.test.com:8888/则说明跨域,用以下http://127.0.0.1:666/请求
location /{
add_header 'Access-Control-Allow-Origin' '*';
add_header 'Access-Control-Allow-Credentials' 'true';
add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS';
add_header 'Access-Control-Allow-Headers' 'DNT,web-token,app-token,Authorization,Accept,Origin,Keep-Alive,User-Agent,X-Mx-ReqToken,X-Data-Type,X-Auth-Token,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Range';
add_header 'Access-Control-Expose-Headers' 'Content-Length,Content-Range';
#proxy_pass 你要跨域的的接口地址
proxy_pass http://127.0.0.1:666/;
}
#这里说明了如果是http://test-local.test.com:8888/api/则说明跨域,用以下http://127.0.0.1:666/请求
location ^~/api/{
add_header 'Access-Control-Allow-Origin' '*';
add_header 'Access-Control-Allow-Credentials' 'true';
add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS';
add_header 'Access-Control-Allow-Headers' 'DNT,web-token,app-token,Authorization,Accept,Origin,Keep-Alive,User-Agent,X-Mx-ReqToken,X-Data-Type,X-Auth-Token,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Range';
add_header 'Access-Control-Expose-Headers' 'Content-Length,Content-Range';
rewrite ^/api/(.*)$ /$1 break;
#proxy_pass 你要跨域的的接口地址
proxy_pass http://127.0.0.1:666/;
}
}
}
本机dns配置
(如果上面不是test-local.test.com,而直接是你本地localhost则可以直接将test-local.test.com改为localhost或者127.0.0.1就可以,不然配置dns解析!)
找到目录C:\Windows\System32\drivers\etc,打开hosts文件,修改文件,加入
127.0.0.1 a-local.test.com
检查配置和重启
进入安装的目录输入nginx -t 检查配置是否有问题
继续输入nginx -s reload
重启(nginx配置文件修改后都要重启nginx才会生效)
刷新dns
ipconfig /flushdns
在浏览器中输入http://a-local.test.com
, 你将会看到你本地运行的代码界面
成功解决跨域问题
发起请求:
const baseUrl="http://a-local.test.com:8888";
$.ajax({
method:'get',
url:baseUrl+'/getList',
success:(res)=>{
console.log("请求1得到的数据");
console.log(res);
}
})
$.ajax({
method:'get',
url:baseUrl+'/api/getList',
success:(res)=>{
console.log("请求2得到的数据");
console.log(res);
}
})
如图请求成功
附加:
nginx常见命令
-
帮助命令:nginx -h
-
启动Nginx服务器 :start nginx
-
配置文件路径:/usr/local/nginx/conf/nginx.conf
-
检查配置文件:nginx -t
-
停止服务:nginx -s stop
-
退出服务(处理完所有请求后再停止服务):nginx -s quit
-
重新加载配置文件:nginx -s reload
-
显示版本信息并退出 nginx -v
-
杀死所有nginx进程 killall nginx
版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。
如需转载请保留出处:https://bianchenghao.cn/10938.html