今天遇到一个ajax跨域问题,下拉框的数据源要从一个接口获得,但是该接口被部署到另外一台服务器上,在本地可以通过http请求访问,并可以返回json的数据,但是放到页面中不可以获取到下拉框的值,发现chrome控制台中该请求成功,但是没有返回值,于是便遇到了跨域的问题,请教一同事,问题得到解决:
1.搭建nginx服务器
下载nginx,我用的是nginx1.0.0,下载之后放到一个目录中,修改其中的配置文件conf目录中的ngnix.conf文件
2.找到配置中的server{}标签,在里面的localtion/{}标签中添加一句
proxy_pass http://localhost:8080/;
添加后的整体效果为:
1 location / { 2 root html; 3 index index.html index.htm; 4 proxy_pass http://localhost:8080/; 5 }
其中第4行为新加入的
3.在该标签下自己新建一个标签,如下:
1 location /partner{ 2 proxy_pass http://10.23.3.31/partner; 3 }
这个proxy_pass http://10.23.3.31/partner就是你要访问的域
server标签的整体配置为:
1 server { 2 listen 80; 3 server_name localhost; 4 5 #charset koi8-r; 6 7 #access_log logs/host.access.log main; 8 9 location / { 10 root html; 11 index index.html index.htm; 12 proxy_pass http://localhost:8080/; 13 } 14 location /partner{ 15 proxy_pass http://10.23.3.31/partner; 16 } 17 18 #error_page 404 /404.html; 19 20 # redirect server error pages to the static page /50x.html 21 # 22 error_page 500 502 503 504 /50x.html; 23 location = /50x.html { 24 root html; 25 } 26 27 # proxy the PHP scripts to Apache listening on 127.0.0.1:80 28 # 29 #location ~ \.php$ { 30 # proxy_pass http://127.0.0.1; 31 #} 32 33 # pass the PHP scripts to FastCGI server listening on 127.0.0.1:9000 34 # 35 #location ~ \.php$ { 36 # root html; 37 # fastcgi_pass 127.0.0.1:9000; 38 # fastcgi_index index.php; 39 # fastcgi_param SCRIPT_FILENAME /scripts$fastcgi_script_name; 40 # include fastcgi_params; 41 #} 42 43 # deny access to .htaccess files, if Apache's document root 44 # concurs with nginx's one 45 # 46 #location ~ /\.ht { 47 # deny all; 48 #} 49 }
其中12、14、15、16行为自己手动添加的
修改完毕后,启动nginx.exe程序
注意,此时访问的路径会发生变化,不需要带端口号,如果之前的访问为:localhost:8080//oss-api-server...
现在需要改为:localhost//oss-api-server...即可得到从别的域中取回来的数据!
转自:http://www.cnblogs.com/ylee/archive/2013/04/27/3047371.html
相关推荐
nginx 配置跨域不生效 如下配置 server { listen 80; server_name localhost; # 接口转发 location /api/ { # 允许请求地址跨域 * 做为通配符 add_header 'Access-Control-Allow-Origin' '*'; # 设置请求...
### Ajax跨域问题及其解决方案 #### 一、Ajax跨域问题概述 在现代Web开发中,前后端分离架构越来越流行。这种模式下,前端页面与后端服务通常部署在不同的服务器上,甚至可能位于不同的域名下。当浏览器发起对不同...
前言 最近在采用jquery ajax调用http请求时,发现了一系列问题: 如采用firebug调试API请求(这个API是自己服务器的应用),看到服务器明明返回200状态,response返回数据也是...后来才知道是跨域问题(CORS),因为
一、什么是跨域问题 在一个服务器A里放置了json文件,另一个服务器B想向A发送ajax请求,获取此文件,会发生错误。 Chrome提示: XMLHttpRequest cannot load ******. No 'Access-Control-Allow-Origin' header is ...
【AJAX跨域解决办法】 在Web开发中,AJAX(Asynchronous JavaScript and XML)是一种在无需刷新整个页面的情况下更新部分网页的技术。然而,由于浏览器的同源策略限制,AJAX请求通常只能发送到与当前页面同一源的...
为了在Nginx服务器上处理AJAX跨域请求问题,我们可以通过配置Nginx的HTTP响应头来解决。Nginx提供了一个指令`add_header`,可以用于添加额外的HTTP响应头,这里用它来添加与跨域相关的响应头。 具体操作如下: 1. ...
- `详解地址.txt`:详细的Ajax跨域解决方案的文本说明。 - `ajaxclient1`:一个简单的Ajax客户端示例,可能使用JavaScript或jQuery实现,用于发起跨域请求。 - `ajaxserver1`:一个服务端示例,可能是Java应用,展示...
本文将详细介绍 Vue 跨域问题的解决方案,包括使用 Vue-cli 搭建项目、使用 axios 进行 ajax 请求、使用 proxyTable 代理解决跨域问题,以及使用 nginx 解决线上跨域问题。 一、 Vue-cli 搭建项目 使用 Vue-cli ...
总结来说,解决Ajax跨域问题的关键在于设置合适的响应头,而在Nginx服务器上实现这一目标需要对`nginx.conf`或相关站点配置文件进行编辑,添加适当的`add_header`指令。正确配置后,Nginx将允许来自不同源的Ajax请求...
ajax请求报parsererror错误是很宽泛的概念,很多情况下都报这个错, 在很多时候,即使ajax提交、返回都正常 XMLHttpRequest.status=200 (正常响应) XMLHttpRequest.readyState=4 (正常接收) ajax也会提示一个parse...
Nginx 实现AJAX跨域请求 AJAX从一个域请求另一个域会有跨域的问题。那么如何在nginx上实现ajax跨域请求呢?要在nginx上启用跨域请求,需要添加add_header Access-Control*指令。如下所示: location /{ add_header ...
前言 我们单位的架构是在api和js之间架构一个中间层(python编写),以实现后端渲染,登录状态判定,跨域转发api等功能。但是这样一个中间会使前端...解决跨域问题方法很多:反向代理,jsonp,Cross-Origin Resource
解决AJAX跨域问题有多种策略,主要分为以下几种: 1. **JSONP(JSON with Padding)**: - JSONP是一种规避同源策略的技术,它利用`<script>`标签不受同源策略限制的特点。通过在请求URL中添加一个`callback`参数,...
Nginx可以配置为将前端和后端的请求路由到相应的服务器,从而隐藏真实的服务器地址,同时也解决了跨域问题。在Nginx配置文件中,你可以添加一个新的location块来代理后端服务。例如: ```nginx location / { ...
"详解Spring Boot 2.0.2+Ajax解决跨域请求的问题" 知识点1:什么是跨域请求? 跨域请求是指浏览器从一个域名下的网页去请求另一个域名下的资源时,会出现的安全限制问题。该限制是因为浏览器的同源策略(Same-...
JSONP 是一种早期的跨域解决方案,适用于只支持GET请求的浏览器。SignalR 1.x 版本支持 JSONP,但在 SignalR 2.x 及更高版本中已被 CORS 替代。如果需要支持旧浏览器,需要确保 SignalR Hub 支持 JSONP 请求。 3. ...
【Nginx反向代理】为了解决这个问题,Nginx作为一个反向代理服务器可以被用来作为中间层,将客户端的请求转发到目标服务器。Nginx可以配置为将来自不同源的请求视为同源,从而规避跨域限制。在本案例中,Nginx配置...
除了跨域解决方案外,HTML5还引入了许多新特性,显著增强了Web应用程序的功能性和用户体验。 #### 语义化标签 语义化标签使页面结构更加清晰易懂,例如`<header>`、`<footer>`、`<article>`等标签的使用提高了网页...