被前端跨域问题折磨快2天后,终于用ngnx的方式解决了,所以在此总结下。

该篇只探讨如何用Ngnx解决跨域问题,对于原理不作讨论。

1、首先介绍Windows环境下Nignx的相关命令操作

nginx常用命令:

验证配置是否正确: nginx -t

查看Nginx的版本号:nginx -V

启动Nginx:start nginx

快速停止或关闭Nginx:nginx -s stop

正常停止或关闭Nginx:nginx -s quit

配置文件修改重装载命令:nginx -s reload

在停止ngix后,会自动删除/logs目录下的nginx.pid 

可以使用命令 nginx -c conf/nginx.conf 重新创建 或者 再次启动nginx

查看nignx 监听端口 是否启动成功

netstat -ano | findstr 端口号 

解决关闭nignx后 端口仍在监听中 

1、netstat -ano | findstr 端口号   #获取到PID

2、 tasklist | findstr "PID"  #命令找到nginx进程信息

3、 taskkill /f /t /im nginx.exe #结束nginx进程

 

2、介绍如何配置Nignx 解决跨域问题

前端ip端口号:http://localhost:8080/

后端ip端口号:http://localhost:8082/

现在我们在不做跨域设置时,前端请求如下

1 uni.request({
2 url:'http://localhost:8082/ApiController/test',
3 success:(res)=>{
4 console.log(res.data)
5 },
6 })

访问地址:'http://localhost:8082/ApiController/test',就会出现

那么我们进行Nignx配置

编辑   /config/nginx.conf此文件

1)添加头信息,在nginx.conf配置文件http块中添加跨域访问配置

add_header Access-Control-Allow-Origin *; //允许所有域名跨域访问代理地址
add_header Access-Control-Allow-Headers X-Requested-With;
add_header Access-Control-Allow-Methods GET; //跨域请求访问请求方式,

2)设置反向代理

server {
listen 80; #配置nignx的监听端口
server_name localhost; #配置nignx的监听地址
location /ApiController{ #监听地址 以/ApiController开头的地址
proxy_pass http://localhost:8082; #转发地址
}
}

此时配置后我们前端访问url

http://localhost:8082/ApiController/test  应修改为 http://localhost:80/ApiController/test   

#此时监听

以localhost为域名

以80为端口

以/ApiController为地址开头

才会进行地址转发

1 uni.request({
2 url:'http://localhost:80/ApiController/test',
3 success:(res)=>{
4 console.log(res.data)
5 },
6 })

结果:(访问成功)

Nginx解决前端访问资源跨域问题的更多相关文章

  1. 不用调整Nginx,SpringBoot也能解决前端访问的跨域问题

    1.什么情况下会出现跨域问题 通常,在前端工程师的开发过程中,往往在本地机器启动前端服务, 而调用的后端接口服务是在另外一台机器运行,这时就会出现跨域问题,让接口无法调通. 而到了测试环境和生产环境, ...

  2. nginx配置反向代理,解决前端开发的跨域问题

    适用:开发和生产环境 配置如下 server { listen 10901; server_name res.pre.ices.red; #charset koi8-r; #access_log lo ...

  3. Nginx. 用http访问https跨域

    用http 访问 https域名, 报跨越问题 解决方法: 在nginx相应服务的转发配置下添加: add_header 'Access-Control-Allow-Origin' 'http://i ...

  4. nginx/apache静态资源跨域访问问题详解

    1. apache静态资源跨域访问 找到apache配置文件httpd.conf 找到这行 #LoadModule headers_module modules/mod_headers.so把#注释符 ...

  5. 如何用Nginx解决前端跨域问题?

    前言 在开发静态页面时,类似Vue的应用,我们常会调用一些接口,这些接口极可能是跨域,然后浏览器就会报cross-origin问题不给调. 最简单的解决方法,就是把浏览器设为忽略安全问题,设置--di ...

  6. Ajax【介绍、入门、解决Ajax中文、跨域、缓存】

    什么是Ajax Ajax(Asynchronous JavaScript and XML) 异步JavaScript和XML Ajax实际上是下面这几种技术的融合: (1)XHTML和CSS的基于标准 ...

  7. respond.js第六行 SCRIPT5: 拒绝访问。跨域问题

    问题描述:respond.js第六行 SCRIPT5: 拒绝访问.昨天为学弟学妹讲bootstrap,说到对ie78的兼容问题,解决办法中有引入html5shiv.js和respond.js两个文件夹 ...

  8. Vue-cli proxyTable 解决开发环境的跨域问题

    Vue-cli proxyTable 解决开发环境的跨域问题 proxyTable: { '/list': { target: 'http://api.xxxxxxxx.com', pathRewri ...

  9. 解决阿里云OSS跨域问题

    解决阿里云OSS跨域问题 现象 本人项目中对阿里云图片请求进行了两次,第一次通过img标签进行,第二次通过异步加载获取.第一次请求到图片,浏览器会进行缓存,随后再进行异步请求,保存跨域失效. 错误信息 ...

随机推荐

  1. secret_key伪造session来进行越权

    从swpuctf里面的一道ctf题目来讲解secret_key伪造session来进行越权. 以前没有遇到过这种题目,这次遇到了之后查了一些资料把它做了出来,记录一下知识点. 参考资料 http:// ...

  2. js- 判断属性是否 属于该对象 hasOwnProperty()

    var obj ={ name:'suan', sex :'male', age:150, height:185, characeter:true, _proto_:{ lastName:'susan ...

  3. Flutter开发实战笔记

    下载 https://flutter.cn/docs/get-started/install/macos#get-sdk 配置环境变量 export PATH="$PATH:[PATH_TO ...

  4. Gradle上传依赖到私服(nexus)

    子模块配置 buildscript { repositories { mavenLocal() maven { url "http://maven.aliyun.com/nexus/cont ...

  5. Jmeter对数据库做压力测试

    一.环境:apache-jmeter-5.0,Oracle11g.windows7.jdk1.8.ojdbc14-10.2.0.2.0.jar二.操作配置:2.1.启动Jmeter Jmeter初始化 ...

  6. 前端魔法堂:可能是你见过最详细的WebWorker实用指南

    前言 JavaScript从使用开初就一直基于事件循环的单线程运行模型,即使是成功进军后端开发的Nodejs也没有改变这一模型.那么对于计算密集型的应用,我们必须创建新进程来执行运算,然后执行进程间通 ...

  7. Salesforce LWC学习(二十九) getRecordNotifyChange(LDS拓展增强篇)

    本篇参考: https://developer.salesforce.com/docs/component-library/documentation/en/lwc/data_ui_api https ...

  8. Web服务器-并发服务器-Epoll(3.4.5)

    @ 目录 1.介绍 2.代码 关于作者 1.介绍 epoll是一种解决方案,nginx就是用的这个 中心思想:不要再使用多进程,多线程了,使用单进程,单线程去实现并发 在上面博客实现的代码中使用过的轮 ...

  9. MySQL高级部分理论知识细讲

    文章目录 一.数据库分区.分表.分库.分片 YesOk ,大家好 ,我是小刘,许久不见,甚是想念 ,小刘今天来带大家学习 分库分表的基础知识 1.1 单机数据库的瓶颈 单个表数据量越大,读写锁,插入操 ...

  10. python k-means聚类实例

    port sys reload(sys) sys.setdefaultencoding('utf-8') import matplotlib.pyplot as plt import numpy as ...