`

js,css跨域请求

阅读更多

     这次在用cdn的时候终于还是遇到了跨域请求

      索性百度了下  基本方法就是定义一个filter,在每次请求的时候header 头部加一个allow的东西

     具体代码如下

package com.web.filter;  
  
import java.io.IOException;  
  
import javax.servlet.Filter;  
import javax.servlet.FilterChain;  
import javax.servlet.FilterConfig;  
import javax.servlet.ServletException;  
import javax.servlet.ServletRequest;  
import javax.servlet.ServletResponse;  
import javax.servlet.http.HttpServletResponse;  
  
import com.common.dict.Constant2;  
  
import oa.service.DictionaryParam;  
  
public class SimpleCORSFilter implements Filter{  
  
    @Override  
    public void destroy() {  
          
    }  
  
    @Override  
    public void doFilter(ServletRequest req, ServletResponse res,  
            FilterChain chain) throws IOException, ServletException {  
            HttpServletResponse response = (HttpServletResponse) res;  
            response.setHeader("Access-Control-Allow-Origin", DictionaryParam.get(Constant2.DICTIONARY_GROUP_GLOBAL_SETTING, "AccessControlAllowOrigin"));  
            response.setHeader("Access-Control-Allow-Methods", "POST, GET, OPTIONS, DELETE");  
            response.setHeader("Access-Control-Max-Age", "3600");  
            response.setHeader("Access-Control-Allow-Headers", "x-requested-with");  
            chain.doFilter(req, res);  
          
    }  
  
    @Override  
    public void init(FilterConfig arg0) throws ServletException {  
          
    }  
  
}  

 然后在web.xml配置

<filter>  
      <filter-name>cors</filter-name>  
      <filter-class>com.web.filter.SimpleCORSFilter</filter-class>  
    </filter>  
    <filter-mapping>  
      <filter-name>cors</filter-name>  
      <url-pattern>/*</url-pattern>  
    </filter-mapping>

 

基本的思路就是在你的interceptor中    拦截  然后也在session中放入 cdn的请求路径,在页面的引js,css样式的时候 前加上这个头部

还有一个比较坑的地方 就是在你如果js中 自定义了一些js的延伸方法,需在页面最开始的地方就引入jquery

否则会报一些js的错误,类似方法找不到等等,但在本地是可行的

 

另外因为我们是在内网开发,这时候我们模拟了一个cdn

在另一台服务器上,将图片,js文件部署上去,

记住在里面也放一个web.xml,把一些跨域的请求配置 也加上去,才可以让服务器访问你,因为你对于它那边来讲  也算是跨域

 

如果正式的话   在阿里云oss云存储   bucket 配置   cros的请求域名就可

 

 

分享到:
评论

相关推荐

    Jquery跨域Ajax请求测试

    在Web开发中,由于同源策略的限制,JavaScript通常无法直接访问不同源的资源,但随着Web服务的广泛应用,跨域请求的需求日益增加。jQuery,作为一个强大的JavaScript库,提供了便捷的方式来处理这种问题,特别是通过...

    前端后端+跨域请求+java/js

    本文将深入探讨前端与后端之间的通信、跨域请求的概念、原因以及解决策略,并通过Java和JavaScript(JS)的示例来讲解如何处理这些问题。 首先,前端通常指的是用户在浏览器中直接交互的部分,包括HTML、CSS和...

    juery mobile使用ajax跨域请求服务器的小实例

    在这里,我们将探讨如何利用jQuery Mobile和Ajax实现跨域请求。 首先,理解什么是跨域请求。由于浏览器的安全策略,JavaScript通常被限制在同源策略之下,即只能访问与当前页面相同协议、域名和端口的资源。但有时...

    JS跨域请求解决方案.docx

    ### JS跨域请求解决方案 #### 一、理解跨域与同源策略 **跨域**在Web开发中指的是从一个域名发起对另一个域名资源的请求。这种请求涉及到多个域名之间的数据交互,通常会受到浏览器安全策略——**同源策略**(Same...

    css3动画以及js跨域ppt

    跨域请求通常发生在当一个页面试图获取或发送数据到一个与当前页面不同域名的服务端时。为了解决这个问题,有几种常用的方法: - **JSONP (JSON with Padding)**: 适用于GET请求,通过动态插入`&lt;script&gt;`标签来实现...

    js跨域问题解决方案.

    通过设置一个代理服务器,所有跨域请求都先发送到代理服务器,由代理服务器转发到目标服务器,这样可以绕过浏览器的同源策略。 #### 3.4 document.domain 如果子域和父域是相同的顶级域名,可以通过设置`document....

    vue的路由与跨域请求

    本篇文章将深入探讨Vue中的路由管理和如何利用axios处理跨域请求,并简要提及Element UI库的样式应用。 首先,让我们讨论Vue的路由管理。Vue Router是官方推荐的路由库,它允许我们在不同的组件之间实现平滑的导航...

    JS跨域访问解决方案总结.pdf

    10. JavaScript事件处理:文档中的`onclick`属性和JavaScript函数`crossDomainRequest`展示了如何响应用户点击事件来发起跨域请求。 11. 编码问题:在提供的内容中,有些可能是OCR扫描错误导致的编码问题。例如,...

    jsonp跨域请求数据实现手机号码查询实例分析.docx

    ### JSONP 跨域请求数据实现手机号码查询实例分析 #### 前言 在现代Web开发中,跨域问题一直是前端开发者面临的一个常见难题。简单来说,由于浏览器的同源策略限制,当一个网页尝试从不同的源(即不同的协议、端口...

    js实现跨域访问的三种方法

    对于一些静态文件服务,如图片、CSS和JS等资源,也可以通过将请求重定向到资源所在的服务器,再将资源返回给客户端的方式来实现跨域。 以上介绍的三种js实现跨域访问的方法各有优劣,基于iframe的实现较为简单,但...

    finereport跨域打印文档

    4. **前端代码处理**:在前端,通常会使用JavaScript或者jQuery等库来实现跨域请求和打印功能。例如,可以使用`XMLHttpRequest`的`withCredentials`属性,或者使用`fetch API`的`credentials`选项来发送带有认证信息...

    跨域demo.rar

    - **代理服务器**:通过在前端和后端之间架设一个代理服务器,将跨域请求转发到目标服务器,避免浏览器直接发起跨域请求。 - **WebSockets跨域**:WebSocket协议本身支持跨域,服务器只需在握手阶段返回正确头部...

    JS跨域访问解决方案的总结.doc

    然而,随着Web应用程序的复杂性和交互性增加,跨域请求变得越来越普遍,比如加载外部CSS、图片、脚本和字体文件。为了解决这个问题,Web开发者需要采用各种跨域访问的解决方案。 同源策略是一种安全机制,旨在保护...

    js跨域操作页面素材

    2. CORS(Cross-Origin Resource Sharing):这是现代浏览器支持的跨域标准,通过在服务器端设置`Access-Control-Allow-Origin`响应头来允许特定的源进行跨域请求。CORS分为简单请求和预检请求(OPTIONS请求),对于非...

    JS,CSS 以及浏览器

    2. **同源策略**:限制跨域请求的安全策略,及其绕过方法如JSONP、CORS。 3. **DOM渲染**:HTML解析、CSSOM构建、渲染树生成、布局与绘制。 4. **性能优化**:减少HTTP请求、合并CSS和JavaScript文件、利用缓存、...

    WEB前端关于跨域问题的8种解决方案

    6. **代理服务器**:在前端与目标服务器之间设置一个代理服务器,所有跨域请求都通过代理转发,这样请求的实际源就会与代理服务器同源,从而规避同源策略。 7. **WebSocket**:WebSocket是一种持久化的双向通信协议...

    基于PHP的minify 自动压缩合并JS和CSS(减少请求数).zip

    "基于PHP的minify 自动压缩合并JS和CSS(减少请求数)"是一个解决这个问题的方案,它通过合并和压缩JavaScript (JS) 和 Cascading Style Sheets (CSS) 文件来减少网络请求的数量,从而加快页面的加载速度。 1. ...

    Flask配置Cors跨域的实现

    跨域是指:浏览器A从服务器B获取的静态资源,包括Html、Css、Js,然后在Js中通过Ajax访问C服务器的静态资源或请求。即:浏览器A从B服务器拿的资源,资源中想访问服务器C的资源。 同源策略是指:浏览器A从服务器B获取...

    vue 跨域配置解决方案

    1、在使用vue开发的时候经常要涉及到跨域的问题,其实在vue cli中是有我们设置跨域请求的文件的。 2、当跨域无法请求的时候我们可以修改工程下config文件夹下的index.js中的dev:{}部分。 dev: { env: require('./...

Global site tag (gtag.js) - Google Analytics