前端同学因开发需要，本地搭建的服务需要调用其它域名的接口，在帮助正确配置后，已能正常使用。

这里写一篇博客，记录一下。

前端页面地址为127.0.0.1:9813/a.html

接口地址http://test.cas.com/news/auth

让前端在他自己电脑安装好nginx后，在nginx.conf文件加入下面配置:

server{

#任意一不在使用中的端口都行

　　listen 3389;

　　server_name www.l.com;

#/表示所有请求www.l.com都会进入如下处理

　　location / {

　　#所有请求www.l.com都会被转发给test.cas.com域名下

　　　　proxy_pass http://test.cas.com/news/auth;

　　　　#以下配置是允许代理服务允许跨域

　　　　add_header Access-Control-Allow-Origin *;

　　　　add_header Access-Control-Allow-Headers "Origin, X-Requested-With, Content-Type, Accept";

　　　　add_header Access-Control-Allow-Methods "GET, POST, OPTIONS";

}

hosts文件新增绑定:  127.0.0.1 www.l.com

前端页面代码示例:

<html>
<body>

<h2>Index</h2>
<div id="show"></div>
<script src="https://common.cnblogs.com/scripts/jquery-2.2.0.min.js"></script>
<script type="text/javascript">
　　$(function () {

　　　　//代理服务会自动把参数转发给test.cas.com域名下
　　　　$.get("http://www.l.com:3389?callback=jQuery31109208535942584586_1499060137214&newsTypeId=100", {}, function (result) {
　　　　　　$("#show").html(result);
　　　　})
　　})
</script>
</body>
</html>

搭建nginx代理，为前端页面跨域调用接口的更多相关文章

  1. 配置nginx反向代理服务器，解决浏览器跨域调用接口的限制问题

    配置nginx反向代理服务器,解决浏览器跨域调用接口的限制问题 - 大venn的博客 - CSDN博客https://blog.csdn.net/u011135260/article/details/ ...

  2. 调用ajax 跨域调用接口

    //ajax 跨域请求数据 function ajaxType (){ $.ajax({ url: "http://127.0.0.1:9090/spring_mvc/HttpClient/ ...

  3. 跨域调用接口的方法之一：$.ajaxSetup()

    跨域查询接口的数据,之前在公司时有发生过,产生的原因是,本地请求的域名或IP地址不一致,解除方法,也是修改域名和IP地址.比如: 接口中的数据来自IP地址:192.168.1.23/get.php 如 ...

  4. 跨域调用接口——WebClient通过get和post请求api

    AJAX不可以实现跨域请求,经过特殊处理才行.一般后台可以通过WebClient实现跨域请求~ //get 请求        string url = string.Format("htt ...

  5. 使用CORS解决flask前端页面跨域问题

    from flask import Flask from flask_cors import CORS app = Flask(__name__) CORS(app) @app.route(" ...

  6. nginx 前后端分离 代理转发，解决跨域问题

    场景 适用于公司有前端,项目采用前后端分离.类似于我们 后端 springboot 提供接口,前端专门写html调用相应的接口,解决跨域问题 配置说明 worker_processes 1; even ...

  7. ajax——CORS跨域调用REST API 的常见问题以及前后端的设置

    RESTful架构是目前比较流行的一种互联网软件架构,在此架构之下的浏览器前端和手机端能共用后端接口. 但是涉及到js跨域调用接口总是很头疼,下边就跟着chrome的报错信息一起来解决一下. 假设:前 ...

  8. 跨域调用webservice

    本人第一次在博客园写博客. 最近研究js的跨域调用,举个小例子. ASP.net 中webservice 源代码 /// <summary>    /// Service1 的摘要说明   ...

  9. jquery中的jsonp跨域调用

                                                    jquery jsonp跨域调用接口

随机推荐

  1. web开发有那些牛逼东西可以用

    1.squid 缓存网页 2.Pingdom 我使用Pingdom来验证Superexpert.com网站是否总是处在正常运行状态之中.你可以通过浏览“Pingdom.com”的方式来注册Pingdo ...

  2. 通过代码去执行testNG用例

    背景 用testNG去编写的测试用例,通过@Test去执行用例,一般本地都是通过IDE去执行相应的方法,持续集成的话,都是通过maven来执行或指定testNG.xml执行,但是如果想通过接口/界面去 ...

  3. django系列8.4--django中间件的可应用案例, 限制请求次数与时间

    应用案例 1.做IP访问频率限制 某些IP访问服务器的频率过高,进行拦截, 比如每分钟不能超过20次 2.URL访问过滤 如果用户访问的是login视图,就允许请求 如果访问其他视图, 需要检测是不是 ...

  4. JS 获取各个偶数之和！！

    <html>    <head>        <meta charset="utf-8" />        <title>js& ...

  5. 【文文殿下】 [SDOI2016]生成魔咒

    字符集大小为1e9.............使用 map 吧 统计本质不同的子串个数是SAM的经典应用之一 本质不同的子串个数其实就是\(\sum max(x)-min(x)+1\) 所以我们新建结点 ...

  6. JAVA 中的 StringBuilder 和 StringBuffer 适用的场景是什么？

    JAVA 中的 StringBuilder 和 StringBuffer 适用的场景是什么? 最简单的回答是,stringbuffer 基本没有适用场景,你应该在所有的情况下选择使用 stringbu ...

  7. extjs Tree中避免连续单击会连续请求服务器

    应用场景:在项目中我要做一个左边是tree,右边是panel的界面.当我单击tree中的一条记录时,发送请求,并将结果显示在右边的panel中.做完之后发现,如果连续单击就会连续请求两次服务器,毕竟用 ...

  8. linux互传文件nc命令

    使用nc命令可以很快的在两台主机传递文件,且不需要在同一网段,只要设置好端口即可. 一.安装(CentOS下) yum install -y nc  (需要root权限,可以用加上sudo) 二.使用 ...

  9. 2016级算法期末模拟练习赛-B.AlvinZH的青春记忆I

    1083 AlvinZH的青春记忆I 思路 中等题,动态规划. 简化题意,一个环上取数,数不可相邻,取取得数之和最大值. 环不好表示,可以解开变成一列数,那么答案应为下列两种情况较大者. ①:取第一个 ...

  10. c#-MVC基础操作-数据的展示及增删改、登录页面及状态保持

    一.数据展示 1.View代码: <%@ Page Language="C#" Inherits="System.Web.Mvc.ViewPage<dynam ...