Angularjs ng src未使用基本授权_Angularjs

Angularjs ng src未使用基本授权

angularjs

Angularjs ng src未使用基本授权,angularjs,Angularjs,我已经在AngularJS中创建了一个使用基本授权的小型web应用程序。为此，我在app.js中添加了以下行： app.js .config(['$httpProvider', function ($httpProvider) { $httpProvider.defaults.headers.common['Content-Type'] = 'application/json'; $httpProvider.defaults.headers.common['Accept'] =

我已经在AngularJS中创建了一个使用基本授权的小型web应用程序。为此，我在app.js中添加了以下行：

app.js

.config(['$httpProvider', function ($httpProvider) {
    $httpProvider.defaults.headers.common['Content-Type'] = 'application/json';
    $httpProvider.defaults.headers.common['Accept'] = 'application/json';
    $httpProvider.defaults.headers.common['Authorization'] = "Basic am9obkBqb2huLmNvbTpibGE=";
}]);

<!-- Define security patterns to allow/disallow access -->
<http pattern="/favicon.ico*" security="none" />
<http pattern="/resources/**" security="none" />
<http use-expressions="true" create-session="stateless" auto-config='true' entry-point-ref="restAuthenticationEntryPoint">
    <intercept-url pattern="/api/**" access="hasRole('ROLE_USER')"/>
    <http-basic/>
</http>

在服务器端，我使用Spring MVC显示文件：

ImageResourceController.java

@Controller
@RequestMapping("/common/image")
public class ImageResourceController {
    @Autowired
    private FileService fileService;

    /***************************************************
    * URL: /api/common/image/{id}
    * Method: GET
    * get(): gets an image according to it's uuid from the db
    * @param id : String id (UUID)
    * @return ByteArray containing image
    ****************************************************/
    @RequestMapping(value = "/{id}", method = RequestMethod.GET, produces = MediaType.IMAGE_JPEG_VALUE)
    @ResponseBody
    public byte[] get(@PathVariable("id") String id) throws IOException {
        FileMeta fileMeta = fileService.loadFile(id);

        return IOUtils.toByteArray(fileMeta.getInputStream());
    }
}

/**
 * File Service Layer takes care about the file operations to the database.
 * <p>
 */
@Service
public class FileService {
    @Autowired
    GridFsOperations gridOperation;

    /***************************************************
     * Loads a file with metadata from GridFS.
     * <p>
     * @param uuid : String uuid
     * @return fileMeta : FileMeta fileMeta
     ****************************************************/
    public FileMeta loadFile(String uuid) {
        FileMeta fileMeta = new FileMeta();

        try {
            GridFSDBFile gridFile = gridOperation.findOne(new Query(Criteria.where("metadata.UUID").is(uuid)));
            fileMeta.setMetaData(gridFile.getMetaData().toMap());
            fileMeta.setInputStream(gridFile.getInputStream());
        } catch (Exception e) {
            fileMeta = null;
            e.printStackTrace();
        }

        return fileMeta;
    }
}

/**
* FileMeta is used to transfer a file with metadata.
*
*/
public class FileMeta {
    private Map<String, Object> metaData;
    private InputStream inputStream;

    public Map<String, Object> getMetaData() {
        return metaData;
    }

    public void setMetaData(Map<String, Object> metaData) {
       this.metaData = metaData;
    }

    public InputStream getInputStream() {
        return inputStream;
    }

    public void setInputStream(InputStream inputStream) {
        this.inputStream = inputStream;
    }
}

FileService.java

@Controller
@RequestMapping("/common/image")
public class ImageResourceController {
    @Autowired
    private FileService fileService;

    /***************************************************
    * URL: /api/common/image/{id}
    * Method: GET
    * get(): gets an image according to it's uuid from the db
    * @param id : String id (UUID)
    * @return ByteArray containing image
    ****************************************************/
    @RequestMapping(value = "/{id}", method = RequestMethod.GET, produces = MediaType.IMAGE_JPEG_VALUE)
    @ResponseBody
    public byte[] get(@PathVariable("id") String id) throws IOException {
        FileMeta fileMeta = fileService.loadFile(id);

        return IOUtils.toByteArray(fileMeta.getInputStream());
    }
}

/**
 * File Service Layer takes care about the file operations to the database.
 * <p>
 */
@Service
public class FileService {
    @Autowired
    GridFsOperations gridOperation;

    /***************************************************
     * Loads a file with metadata from GridFS.
     * <p>
     * @param uuid : String uuid
     * @return fileMeta : FileMeta fileMeta
     ****************************************************/
    public FileMeta loadFile(String uuid) {
        FileMeta fileMeta = new FileMeta();

        try {
            GridFSDBFile gridFile = gridOperation.findOne(new Query(Criteria.where("metadata.UUID").is(uuid)));
            fileMeta.setMetaData(gridFile.getMetaData().toMap());
            fileMeta.setInputStream(gridFile.getInputStream());
        } catch (Exception e) {
            fileMeta = null;
            e.printStackTrace();
        }

        return fileMeta;
    }
}

/**
* FileMeta is used to transfer a file with metadata.
*
*/
public class FileMeta {
    private Map<String, Object> metaData;
    private InputStream inputStream;

    public Map<String, Object> getMetaData() {
        return metaData;
    }

    public void setMetaData(Map<String, Object> metaData) {
       this.metaData = metaData;
    }

    public InputStream getInputStream() {
        return inputStream;
    }

    public void setInputStream(InputStream inputStream) {
        this.inputStream = inputStream;
    }
}

/**
*文件服务层负责对数据库执行文件操作。
*
*/
@服务
公共类文件服务{
@自动连线
GridFS操作gridOperation；
/***************************************************
*从GridFS加载包含元数据的文件。
*
*@param uuid:String uuid
*@return fileMeta:fileMeta fileMeta
****************************************************/
公共文件元数据加载文件（字符串uuid）{
FileMeta FileMeta=newfilemeta（）；
试一试{
GridFSDBFile gridFile=gridOperation.findOne（新查询（Criteria.where（“metadata.UUID”）.is（UUID））；
setMetaData（gridFile.getMetaData（）.toMap（））；
fileMeta.setInputStream（gridFile.getInputStream（））；
}捕获（例外e）{
fileMeta=null；
e、 printStackTrace（）；
}
返回fileMeta；
}
}

FileMeta.java

@Controller
@RequestMapping("/common/image")
public class ImageResourceController {
    @Autowired
    private FileService fileService;

    /***************************************************
    * URL: /api/common/image/{id}
    * Method: GET
    * get(): gets an image according to it's uuid from the db
    * @param id : String id (UUID)
    * @return ByteArray containing image
    ****************************************************/
    @RequestMapping(value = "/{id}", method = RequestMethod.GET, produces = MediaType.IMAGE_JPEG_VALUE)
    @ResponseBody
    public byte[] get(@PathVariable("id") String id) throws IOException {
        FileMeta fileMeta = fileService.loadFile(id);

        return IOUtils.toByteArray(fileMeta.getInputStream());
    }
}

/**
 * File Service Layer takes care about the file operations to the database.
 * <p>
 */
@Service
public class FileService {
    @Autowired
    GridFsOperations gridOperation;

    /***************************************************
     * Loads a file with metadata from GridFS.
     * <p>
     * @param uuid : String uuid
     * @return fileMeta : FileMeta fileMeta
     ****************************************************/
    public FileMeta loadFile(String uuid) {
        FileMeta fileMeta = new FileMeta();

        try {
            GridFSDBFile gridFile = gridOperation.findOne(new Query(Criteria.where("metadata.UUID").is(uuid)));
            fileMeta.setMetaData(gridFile.getMetaData().toMap());
            fileMeta.setInputStream(gridFile.getInputStream());
        } catch (Exception e) {
            fileMeta = null;
            e.printStackTrace();
        }

        return fileMeta;
    }
}

/**
* FileMeta is used to transfer a file with metadata.
*
*/
public class FileMeta {
    private Map<String, Object> metaData;
    private InputStream inputStream;

    public Map<String, Object> getMetaData() {
        return metaData;
    }

    public void setMetaData(Map<String, Object> metaData) {
       this.metaData = metaData;
    }

    public InputStream getInputStream() {
        return inputStream;
    }

    public void setInputStream(InputStream inputStream) {
        this.inputStream = inputStream;
    }
}

/**
*FileMeta用于传输包含元数据的文件。
*
*/
公共类FileMeta{
私有地图元数据；
私有输入流输入流；
公共映射getMetaData（）{
返回元数据；
}
公共void setMetaData（映射元数据）{
this.metaData=元数据；
}
公共输入流getInputStream（）{
返回输入流；
}
公共void setInputStream（InputStream InputStream）{
this.inputStream=inputStream；
}
}

spring-security.xml（拦截url模式=“/api/**适用）

授权对我使用$http和$resource执行的每个调用都有效。但是，当我想使用img ng src（我使用的是MongoDB文件存储）从数据库加载我的映像时，授权头不会解析到服务器，登录失败

<img ng-src="/api/common/image/5ac8618c-7979-4940-a038-1ea91fbd55b3"/><br/>

有人能告诉我如何用img ng src发送授权头吗

我正在使用AngularJS 1.2.0

谢谢您的帮助。

如前所述，您可以使用（

bower安装-如果使用，请保存angular img http src）
如果你看一下，它使用的是2016年4月19日的和
要使用它，请将'angular.img'
声明为应用程序模块的依赖项（angular.module（'myapp'，[…，'angular.img']）
），然后在HTML中可以使用http src
属性作为

但您也可以使用
使其动态化
当然，这意味着您已声明使用$httpProvider.interceptors.push
添加自定义头，或者您已使用
静态设置每个请求的头对不起，但需要更多信息。您从只能通过授权访问的数据库获取图像？我不太清楚正在设置ng src和您的授权进程之间的连接。为什么不将图像保存到变量中，当授权成功并对其进行base64编码时？您需要将其保存在某个位置，您也无法将标题信息添加到普通src中，这应该如何工作？感谢您的消息。是的，图像只能从授权时db。授权是服务器端正常的基本身份验证。很抱歉，后端是用Spring编写的，我不想混淆代码。我注意到AngularJS没有将头解析为Spring。我认为如果Spring代码比AngularJS代码多，可能会让人困惑。我假设AngularJS也在发送heade为img ng src提供r信息。但如果不是这样，那么您是对的。然后我必须先将图像获取到一个变量中。ng-src与src类似，不同之处在于您可以将其与$scope变量一起使用。我不是100%确定，但我认为base64编码是客户端处理此问题的唯一方法。谢谢不过，如果没有混合，你可能会让我很困惑（：谢谢你的回答。我只是在玩二进制和base64编码。我想我还需要一段时间来弄清楚它是如何工作的：）我可以向你保证，这不好玩；）我会发布一些代码，但不幸的是：(