前端使用 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 ...
随机推荐
- HTTP与HTTPs的区别？
简而言之: HTTPS = HTTP + SSL HTTP 的 URL 以 http:// 开头,而 HTTPS 的 URL 以 https:// 开头 HTTP 是不安全的,而 HTTPS 是安 ...
- JDK和Tomcat安装
JDK安装: 1,选择安装位置,其余默认安装,安装两次,一个是JDK,一个是JRE,安装在两个文件夹中. 2,配置环境变量: 1,新建一个变量,变量名:JAVA_HOME,变量值:C:\Program ...
- elementUI 设置input的只读或禁用
只读:readonly 在data里定义:readonly: true, 然后在input框里加上readonly就可以了. 禁用:disabled 在data里定义:edit: true, 然后在i ...
- tsung HTTP协议统计报告分析
tsung HTTP协议统计报告分析 by:授客 QQ:1033553122 1. Main Static l higest 10sec mean: 基于每10s的统计,最大耗时 l lowe ...
- Glass Dragon
3 minutes by 3Delight 11.0.148
- C#：关于C#4中IEnumerable<out T>的理解
IEnumerable<out T>这个接口非常常见,它是最基础的泛型集合接口,表示可迭代的项的序列. 但是奇怪的是为什么泛型参数要带一个“out”? 经过一番资料查阅后,发现此“out” ...
- Android智能指针SP WP使用方法介绍
Android手机操作系统既然是开源的操作系统.那么在具体的文件夹中就会存放着各种相关功能的开源代码.我们在使用的时候可以根据这些源代码进行相应的修改就能轻松的完成我们所需的功能.在这里大家就一起来看 ...
- Kotlin的参考资料
参考资料和站点 http://kotlinlang.org/ 官方网站 https://github.com/JetBrains/kotlin/releases/tag/v1.0.6 下载compil ...
- CentOS基本的命令与快捷建
由于我的计算机在安装linux系统时,计算机出现了问题,并没有安装ubuntu而是安装的centos.虽然两者属于linux的不同版本,但是在具体的操作上大同小异.在学习linux的各种指令和快捷键的 ...
- 2016-04-25-信息系统实践手记6-JS调用Flex的性能问题一例
layout: post title: 2016-04-25-信息系统实践手记6-JS调用Flex的性能问题一例 key: 20160425 tags: GIS JS FLEX 技术选型 性能 API ...