RPC跨域问题

博客探讨了Ajax跨域访问的问题,包括介绍、问题演示和解决方案。服务器端通过CORSFilter过滤器设置响应头解决跨域,前端利用JSONP进行跨域请求。详细步骤包括CORSFilter的配置和JSONP的原理及实现。
摘要由CSDN通过智能技术生成

理解 ajax 的跨域访问

服务器段,使用 CORSFilter 过滤器解决跨域问题

前端使用 JSONP 解决跨域问题

Ajax 跨域介绍

Ajax 跨域问题

建立 ajax-origin 项目

<?xml version="1.0" encoding="UTF-8"?>

<project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
  xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/xsd/maven-4.0.0.xsd">
  <modelVersion>4.0.0</modelVersion>

  <groupId>com.zxw</groupId>
  <artifactId>ajax-origin</artifactId>
  <version>1.0-SNAPSHOT</version>
  <packaging>war</packaging>

  <name>ajax-origin Maven Webapp</name>
  <!-- FIXME change it to the project's website -->
  <url>http://www.example.com</url>

  <properties>
    <!-- spring 依赖 -->
    <spring.version>4.3.18.RELEASE</spring.version>
    <jstl.version>1.2</jstl.version>
    <servlet-api.version>2.5</servlet-api.version>
    <jsp-api.version>2.0</jsp-api.version>
    <jackson.version>2.9.0</jackson.version>
  </properties>

  <dependencies>
    <!-- jstl依赖 -->
    <dependency>
      <groupId>jstl</groupId>
      <artifactId>jstl</artifactId>
      <version>${jstl.version}</version>
    </dependency>
    <dependency>
      <groupId>javax.servlet</groupId>
      <artifactId>servlet-api</artifactId>
      <version>${servlet-api.version}</version>
      <scope>provided</scope>
    </dependency>
    <dependency>
      <groupId>javax.servlet</groupId>
      <artifactId>jsp-api</artifactId>
      <version>${jsp-api.version}</version>
      <scope>provided</scope>
    </dependency>

  </dependencies>
  <build>
    <finalName>ajax</finalName>
    <plugins>
      <!-- 配置Tomcat插件 -->
      <plugin>
        <groupId>org.apache.tomcat.maven</groupId>
        <artifactId>tomcat7-maven-plugin</artifactId>
        <version>2.2</version>
        <configuration>
          <path>/ajax</path>
          <port>9090</port>
        </configuration>
      </plugin>

    </plugins>
  </build>
</project>

发送 Ajax 请求

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>Insert title here</title>
    <script type="text/javascript" src="https://code.jquery.com/jquery-1.11.3.js"></script>

    <script type="text/javascript">
        function sendAjax(){
            $.post("http://localhost:7070/loadOrderList02","uid=1234",function(data){

                alert(data);
            });
           
        }
       
    </script>
</head>
<body>
   <a href="javascript:sendAjax()">sendAjax</a>
</body>
</html>
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值