1.下载ngnix稳定版   (http://nginx.org/en/download.html)

2.解压到你中意的目录。

3.将你的网页文件放到刚解压html文件目录下

4.打开conf  > nginx.conf 配置文件,将server项目修改成:(修改完成记得cd到你解压的nginx的目录下运行 nginx -s reload 重启一下nginx)

server {
listen 8848;#监听端口
server_name localhost;#代理服务地址
location / {
root html;
index index.html index.php 1.php 1.html;
}
#开始配置我们的反向代理
location /api{ #"/api"中的api可以替换为自定义的任何内容
rewrite ^/api/(.*)$ /$1 break;
include uwsgi_params;
proxy_pass https://cn.bing.com; #我们要反向代理的地址,这里以 必应 为例
charset utf-8; #显示中文
add_header 'Access-Control-Allow-Origin' '*'; #允许来自所有的访问地址
add_header 'Access-Control-Allow-Credentials' 'true';
add_header 'Access-Control-Allow-Methods' 'GET, PUT, POST, DELETE, OPTIONS'; #支持请求方式
add_header 'Access-Control-Allow-Headers' 'Content-Type,*';
}
}

5.进入浏览器里面,访问 localhost:8848 或 127.0.0.1:8848(设置的监听端口,注意端口别冲突) 就能进到你项目的根目录;

6.在网页中就可以使用  /api 来代理到你想要访问的服务器地址了,

比如我想要请求的接口为:https://cn.bing.com/HPImageArchive.aspx?format=js&idx=0&n=1&mkt=zh-CN;

直接ajax 请求存在跨域(同源政策),所以我们进行上面的配置反向代理, 用 /api 来帮我们代理到  https://cn.bing.com,

就可以吧请求的接口写为:/api/HPImageArchive.aspx?format=js&idx=0&n=1&mkt=zh-CN 。

var url = "/api/HPImageArchive.aspx?format=js&idx=0&n=1&mkt=zh-CN";
$.ajax({
url:url,
type:"post",
dataType: "json",
success: function(data){
console.log(data);
},
error:function(){
console.log("error")
}
});

注意:如果你使用的是hbuider 等内置服务器 的IDE 就不能直接通过 “运行到浏览器来” 运行项目了,需要通过我们配置的 l ocalhost:8848 或 127.0.0.1:8848 来运行和调试我们的项目。

完美解决跨域问题。

前端跨域 nginx 反向代理的更多相关文章

  1. Vue解决跨域之反向代理

    目录 : config/index.js module.exports = { dev: { // Paths assetsSubDirectory: 'static', assetsPublicPa ...

  2. 前端通过Nginx反向代理解决跨域问题

    在前面写的一篇文章SpringMVC 跨域,我们探讨了什么是跨域问题以及SpringMVC怎么解决跨域问题,解决方式主要有如下三种方式: JSONP CORS WebSocket 可是这几种方式都是基 ...

  3. nginx反向代理的一次实践

    场景:前端(VUE.js)应用部署在linux服务器,需要支持http和https访问. 问题1:阿里服务器不支持域名访问? 通过域名绑定服务器解决 问题2:如何通过http访问前端 前端通过ngin ...

  4. nginx反向代理-解决前端跨域问题

    1.定义 跨域是指a页面想获取b页面资源,如果a.b页面的协议.域名.端口.子域名不同,所进行的访问行动都是跨域的,而浏览器为了安全问题一般都限制了跨域访问,也就是不允许跨域请求资源.注意:跨域限制访 ...

  5. 用nginx的反向代理机制解决前端跨域问题在nginx上部署web静态页面

    用nginx的反向代理机制解决前端跨域问题在nginx上部署web静态页面 1.什么是跨域以及产生原因 跨域是指a页面想获取b页面资源,如果a.b页面的协议.域名.端口.子域名不同,或是a页面为ip地 ...

  6. 项目部署问题:xftp无法连接服务器、Nginx403 Forbidden解决、nginx反向代理解决前端跨域问题

    一.xftp无法连接服务器 在xftp中配置正确的ip,用户名和密码后,居然无法连接 解决方案:将协议里面的FTP换成SFTP,注意换成SFTP后端口就默认换成22,要还是原来的21就还是连不上的哈 ...

  7. 前端跨域实现的几种方式?及使用Nginx反向代理配置。

    早期为了防止CSRF(跨域请求伪造)的攻击,浏览器引入了同源策略(SOP)来提高安全性.而所谓"同源策略",即同域名(domain或ip).同端口.同协议的才能互相获取资源,而不能 ...

  8. 前端解决跨域问题的终极武器——Nginx反向代理

    提到代理,分为:正向代理和反向代理. 正向代理:就是你访问不了Google,但是国外有个VPN可以访问Google,你访问VPN后叫它访问Google,然后把数据传给你. 正向代理隐藏了真实的客户端. ...

  9. Nginx反向代理、CORS、JSONP等跨域请求解决方法总结

    由于 Javascript 同源策略的存在使得一个源中加载来自其它源中资源的行为受到了限制.即会出现跨域请求禁止. 通俗一点说就是如果存在协议.域名.端口或者子域名不同服务端,或一者为IP地址,一者为 ...

随机推荐

  1. 『数据结构』RMQ问题

    RMQ(Range Minimum/Maximum Query),即区间最值问题. 对于长度为 n 的数列 A ,回答若干查询 RMQ(A,i,j)(i,j<=n) ,返回数列 A 中下标在 i ...

  2. js解析json报错Unexpected token i in JSON at position 1

    因为后台json是手动拼接的,在拼接时偷了懒,不想转义,所以就用了单引号,结果js解析时悲催了 这里记录一下,被解析的json字符串必须键值对都用双引号包起来,必须是双引号 默默罚抄一百遍

  3. unittest使用总结

    unittest简介 Unittest是python内置的一个单元测试框架,主要用于自动化测试用例的开发与执行 简单的使用如下 import unittest class TestStringMeth ...

  4. python手册学习笔记2

    笔记2 > http://www.pythondoc.com/pythontutorial3/datastructures.html 列表操作 list.append(x) 把一个元素添加到列表 ...

  5. css3自定义移动端滚动条

    css3自定义移动端滚动条<pre>/*定义滚动条宽 高度是根据内容设置的高度决定的*/::-webkit-scrollbar{ width: 5px;} /*定义滚动条轨道 内阴影+圆角 ...

  6. [笔记] HOW2J.CN网站记录的java笔记_第四部分_HTML

    1.写一个显示Hello World的网页, <html> <body> <p>Hello World</p> </body> </h ...

  7. Dev 日志 | 一次 Segmentation Fault 和 GCC Illegal Instruction 编译问题排查 NebulaGraph

    摘要 笔者最近在重新整理和编译 Nebula Graph 的第三方依赖,选出两个比较有意思的问题给大家分享一下. Flex Segmentation Fault--Segmentation fault ...

  8. Python3.7.1学习(二)使用schedule模块定时执行任务

    python中有一个轻量级的定时任务调度的库:schedule.他可以完成每分钟,每小时,每天,周几,特定日期的定时任务.因此十分方便我们执行一些轻量级的定时任务. 1 安装  1.1在cmd中输入p ...

  9. Grid表格的js触发事件

    没怎么接触过Grid插件: 解决的问题是:点击Grid表行里的内容触发js方法弹出模态框,用以显示选中内容的详细信息. 思路:给准备要触发的列加上一个css属性,通过这个css属性来获取元素并触发js ...

  10. 自制反汇编逆向分析工具 与hopper逆向输出对比

    经过一个阶段5次迭代之后,本逆向分析工具功能基本成形.工具的基本功能介绍请参看前面的posts. 现在就和hopper的逆向函数伪代码的功能对比一下效果.在这里并非定胜劣,因为差异可以拿来对比参照,通 ...