1200字范文 > 用nginx解决前端跨域问题

用nginx解决前端跨域问题

时间：2024-04-16 20:41:08

相关推荐

用nginx解决前端跨域问题

写服务器写接口模拟后端

首先自己用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_nopushon;#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# 比如你的项目测试环境为,你本地此处可以设置为a-,当然你可以随便设置#这里说明了如果是http://test-: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-: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-，而直接是你本地localhost则可以直接将test-改为localhost或者127.0.0.1就可以，不然配置dns解析！）

找到目录C:\Windows\System32\drivers\etc，打开hosts文件，修改文件,加入

127.0.0.1 a-

检查配置和重启

进入安装的目录输入nginx -t 检查配置是否有问题

继续输入nginx -s reload重启(nginx配置文件修改后都要重启nginx才会生效)

刷新dns

ipconfig /flushdns

在浏览器中输入http://a-, 你将会看到你本地运行的代码界面

成功解决跨域问题

发起请求：

const baseUrl="http://a-: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);}})

如图请求成功

附加：