问题描述

之前要测试一个http的接口,在postman中测试成功,但使用ajax调用却跨域。于是通过使用ngin反向代理的方式来解决ajax调用跨域问题

测试页面的内容

  1. <html>
  2. <head>
  3. <script type="text/javascript" src="https://cdn.bootcss.com/jquery/3.4.1/jquery.js"></script>
  4. <script type="text/javascript">
  5. $(document).ready(function(){
  6. $("#b01").click(function(){
  7. $.ajax({
  8. type : "POST",
  9. url : "http://xxx.xxx.xx.xx:8770/kfeinvoice/finance/invoiceViewByFinance",
  10. data : '{"originalOrderNo": "123456","dataSource": "01","queryType": "01","invoiceCode": "", "invoiceNo": ""}',
  11. contentType : "application/json",
  12. dataType : "json",
  13. complete:function(msg) {
  14. console.log(msg)
  15. $("#myDiv").html(JSON.stringify(msg.responseJSON))
  16. $("#myDiv").append("<p>"+msg.responseText+"</p>")
  17. }
  18. });
  19. });
  20. });
  21. </script>
  22. </head>
  23. <body>
  24. <div id="myDiv"><h2>通过 AJAX 改变文本</h2></div>
  25. <button id="b01" type="button">改变内容</button>
  26. </body>
  27. </html>

nginx中的vhost,xx.conf的配置

  1. server {
  2. listen 8770;
  3. server_name serv.com;
  4. index index.html;
  5. location ^~ /v/ {
  6. alias D:/xxx/;
  7. try_files $uri $uri/ /index.html;
  8. }
  9. location / {
  10. proxy_set_header Host $host;
  11. proxy_set_header X-Real-IP $remote_addr;
  12. proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
  13. proxy_pass http://abc.xxx.com;
  14. }
  15. access_log D:/data0/logs/www.access.log main;
  16. }

nginx启动后,访问[http://localhost:8770/v/index.html]测试,返回结果正常。

20191204-使用nginx解决ajax测试调用接口跨域问题的更多相关文章

  1. Springboot如何优雅的解决ajax+自定义headers的跨域请求

    1.什么是跨域 由于浏览器同源策略(同源策略,它是由Netscape提出的一个著名的安全策略.现在所有支持JavaScript 的浏览器都会使用这个策略.所谓同源是指,域名,协议,端口相同.),凡是发 ...

  2. Springboot如何优雅的解决ajax+自定义headers的跨域请求[转]

    1.什么是跨域 由于浏览器同源策略(同源策略,它是由Netscape提出的一个著名的安全策略.现在所有支持JavaScript 的浏览器都会使用这个策略.所谓同源是指,域名,协议,端口相同.),凡是发 ...

  3. 解决前后端调用,跨域二次请求Access-Control-Max-Age

    发现前后端分离的项目中,前端发起一个请求到后端,在Chrome浏览器下面debug的时候,Network下面看到同一个url有两条请求,url有两条请求,第一条请求的Method为OPTIONS,第二 ...

  4. axios解决调用后端接口跨域问题

    vue-cli通过是本地代理的方式解决接口跨域问题的.但是在vue-cli的默认项目配置中这个代理是没有配置的,如果现在项目中使用,必须手动配置config/index.js文件 ... proxyT ...

  5. ajax调用webservice 跨域问题

    用js或者jquery跨域调用接口时 对方的接口需要做jsonp处理,你的ajax jsonp调用才可以 egg 接口中已经做了jsonp处理,所以可以跨域调用 //$.ajax({ // url: ...

  6. JAVA联调接口跨域解决办法

    JAVA联调接口跨域解决办法 第一种代码: HttpResponse response = new BasicHttpResponse(HttpVersion.HTTP_1_1,HttpStatus. ...

  7. 上传文件,使用FormData进行Ajax请求,jsoncallback跨域

    通过传统的form表单提交的方式上传文件: <form id= "uploadForm" action= "http://localhost:8080/cfJAX_ ...

  8. 使用nginx反向代理处理前后端跨域访问

    本文主要解决:使用nginx反向代理处理前后端跨域访问的问题 1.何为跨域访问? 以下类型为跨域访问 1)不同域名间访问 www.zuiyoujie.com和www.baidu.com 2)同域名不同 ...

  9. 前后分离调用API跨域

    前后分离调用API接口跨域问题 什么是跨域?  跨域是指一个域下的文档或脚本试图去请求另一个域下的资源,这里跨域是广义的. 广义的跨域: 资源跳转:A链接.重定向.表单提交. 资源嵌入: <li ...

随机推荐

  1. 单例模式(Singleton)---创建型

    1 单例模式的使用场景 (1)当创建一个对象所占用的资源很多,但同时又需要使用到该对象 (2)当堆系统内的资源要求统一读写时,比如读写的配置信息,此时必须要求创建的实例信息相同 (3)当有多个实例可能 ...

  2. (十八)链接数据库,QSqlTableModel

    QMYSQL——mysql QSQLITE——sqlite QOICQ——orcale 所需头文件 .pro增加 sql #include <QSqlDatabase> #include ...

  3. OpenSSL 通过OCSP手动验证证书

    翻译:https://raymii.org/s/articles/OpenSSL_Manually_Verify_a_certificate_against_an_OCSP.html?utm_sour ...

  4. 【luoguP4124 】[CQOI2016]手机号码

    题目描述 人们选择手机号码时都希望号码好记.吉利.比如号码中含有几位相邻的相同数字.不含谐音不吉利的数字等.手机运营商在发行新号码时也会考虑这些因素,从号段中选取含有某些特征的号码单独出售.为了便于前 ...

  5. jquery-常用事件

  6. codeforces364D

    Ghd CodeForces - 364D John Doe offered his sister Jane Doe find the gcd of some set of numbers a. Gc ...

  7. 比较全的解释了:JAVA反射机制

    JAVA反射机制是在运行状态中,对于任意一个类,都能够知道这个类的所有属性和方法:对于任意一个对象,都能够调用它的任意一个方法:这种动态获取的信息以及动态调用对象的方法的功能称为java语言的反射机制 ...

  8. redis慢查询笔记

    慢查询 生命周期 两个配置 三个命令 运维经验 生命周期 1.发送命令 2,排队执行命令因为单线程 3.执行命令 4.返回结果 慢查询发生在第三阶段 客户端超时并不一定有慢查询,但慢查询是客户端超时的 ...

  9. MySQL 中<=>用法(长知识)

    https://www.runoob.com/mysql/mysql-operator.html MySQL 运算符 本章节我们主要介绍 MySQL 的运算符及运算符的优先级. MySQL 主要有以下 ...

  10. 在业务控制方法中收集List<JavaBean>参数

    @Controller @RequestMapping(value="/user") public class UserAction { @RequestMapping(value ...