前端使用 Nginx 反向代理彻底解决跨域问题
引入网址https://blog.csdn.net/larger5/article/details/81286324
1、请求后端数据失败
代码：
<!DOCTYPE html>
<html> <head>
<meta charset="UTF-8">
<title></title>
</head>
<script type="text/javascript" src="https://code.jquery.com/jquery-3.1.0.min.js"></script>
<script type="text/javascript">
function upd() {
$.ajax({
type: "get",
url: "http://120.79.197.130:8530/spring/user/get",
success: function(result) {
console.log(result);
}
});
}
</script> <body>
<!--获取-->
<button id="btn2" onclick="upd()">Get request 获取</button>
</body> </html>
2、加入 nginx
nginx 的下载方法：nginx: download 
1、在 conf/nginx.conf 中，很多都是默认配置，笔者把注释去掉，添加了自己少量的配置
worker_processes 1;
events {
worker_connections 1024;
}
http {
include mime.types;
default_type application/octet-stream;
sendfile on;
keepalive_timeout 65;
server {
listen 8888; # 任意
server_name localhost;
location / {
root html;
index index.html index.htm;
}
# 新加的
location /spring {
proxy_pass http://120.79.197.130:8530; # 后端接口 IP:port
}
error_page 500 502 503 504 /50x.html;
location = /50x.html {
root html;
}
}
}
2、点击 
3、修改代码上述 html 代码的 url
$.ajax({
type: "get",
url: "/spring/user/get", // 注意链接
success: function(result) {
console.log(result);
}
});
4、将代码文件放入 nginx 的 html 文件夹中（可以把里边的其他 html 删掉）
如下
5、基于 nginx 服务器，访问该 html 文件，可以看到，跨域请求，成功访问数据 
前端使用 Nginx 反向代理彻底解决跨域问题的更多相关文章
- 简单配置nginx反向代理，实现跨域请求
简单配置nginx去做反向代理,实现跨域请求 简单介绍nginx的nginx.conf最核心的配置,去做反向代理,实现跨域请求. 更多详细配置,参考nginx官方文档 先介绍几个nginx命令 打开n ...
- nginx 反向代理，支持跨域，前后分离
前端开发往往涉及到跨域问题,其中解决方案很多: 1.jsonp 需要目标服务器配合一个callback函数. 2.window.name+iframe 需要目标服务器响应window.name. 3. ...
- Nginx反向代理配置可跨域
由于业务需要,同一项目中的前端代码放在静态环境中,而后端代码放在tomcat中,但此时问题却出现了:前端使用ajax请求后端获取数据时出现如下报错 XMLHttpRequest cannot load ...
- 【Node】node.js实现服务器的反向代理，解决跨域问题
跨域对于前端来说是一个老大难的问题,许多方法如jsonp.document.domain + iframe...都有或多或少的问题,一个最佳实践就是通过服务器nginx做反向代理,但奈何不懂相关知识, ...
- vue反向代理（解决跨域）
1,vue中有提供反向代理的接口,就是config/index.js中的proxyTable,我的脚手架版本是2.9.6,proxyTable配置初始为空,如下图. 2,将proxyTable配置如下 ...
- vue cli3.3 以上版本配置vue.config.js 及反向代理操作解决跨域操作
const webpack = require('webpack') module.exports = { configureWebpack: { plugins: [ new webpack.Pro ...
- 前端通过Nginx反向代理解决跨域问题
在前面写的一篇文章SpringMVC 跨域,我们探讨了什么是跨域问题以及SpringMVC怎么解决跨域问题,解决方式主要有如下三种方式: JSONP CORS WebSocket 可是这几种方式都是基 ...
- Webpack 开发服务器代理设置解决跨域问题
在前端开发过程中,可能会遇到跨域问题,在 webpack 设置中对 devServer 配置代理即可解决跨域问题,具体设置如下: webpack.config.js module.exports = ...
- vue访问外部接口设置代理，解决跨域（vue-cli3.0）
vue-cli3.0搭建的项目,平时访问内部接口配置了拦截器,今天需要调用天气预报的外部接口,发现跨域问题,通过配置代理解决. 1.在vue.config.js中配置代理 module.exports ...
随机推荐
- webpack4 系列教程(十一)：字体文件处理
教程所示图片使用的是 github 仓库图片,网速过慢的朋友请移步<webpack4 系列教程(十一):字体文件处理>原文地址.或者来我的小站看更多内容:godbmw.com 0. 课程介 ...
- Laravel篇之Laravel的安装及使用
想搭建一个基于Lavarel和vuejs的个人网站,使用git推送到github存储,千里之行,始于足下,首先要做的用composer来下载laravel框架,并成功运行. 一.使用compose ...
- CSS基础知识思维导图xmind
这是我根据自己的学习笔记整理的思维导图,WEB前端的知识很多,汇总来看会比较清晰.
- mysql给root开启远程访问权限
MySql-Server 出于安全方面考虑默认只允许本机(localhost, 127.0.0.1)来连接访问. !!!所以必须给root修改可以远程访问的权限 1.在连接服务器后,操作mysql系统 ...
- 微信小程序 JS 获取View 和 屏幕相关属性（高度、宽度等等）
wx.getSystemInfo({success: function (res) {thisWidth = res.windowWidth;}}); that.setData({view_Width ...
- ios12怎么投屏电脑 苹果手机怎么投
Ios12系统发布成功之后,是不是给我们带来更大的惊喜呢.我们只需要利用手机上的屏幕镜像就可以轻松将手机画面投屏至电脑上,那么ios12怎么投屏电脑?下面便是今天所要分享的手机投屏的方法. 使用工具: ...
- JMeter java.net.URISyntaxException:Illegalcharacterinquery解决方案
java.net.URISyntaxException: Illegal character in query解决方案 by:授客 QQ:1033553122 测试环境 apache-jmeter ...
- WiFi的名词缩写
http://blog.csdn.net/jayxujia123/article/details/12842295 无线网络最初采用的安全机制是WEP(有线等效私密),但是后来发现WEP是很不安全的, ...
- Orchard详解--第五篇 CacheManager
上一篇文章介绍了Orchard中的缓存,本篇主要针对CacheManager进行分析,CacheManager在Orchard中用于存储应用程序的配置信息以及框架内部的一些功能支持,包括整个拓展及拓展 ...
- MyBatis笔记----mybatis分页
mybatis版本3.4以下 结构 spring-mvc.xml <?xml version="1.0" encoding="UTF-8"?> &l ...